사용자는 미디어, 특히 동영상을 좋아합니다. 재미있고 유익할 수 있습니다. 휴대기기에서는 동영상이 텍스트보다 정보를 소비하기에 더 쉬운 방법일 수 있습니다. 우수한 사용자 환경을 위해 동영상에 사용 가능한 대역폭 이상이 필요하지 않아야 합니다. 사용자는 어떤 기기에서든 앱을 사용할 수 있어야 합니다. 사용자는 미디어가 다운로드될 때까지 기다릴 필요가 없습니다. 재생을 눌렀는데 아무 일도 일어나지 않으면 아무도 좋아하지 않습니다.
자체 기기에서 동영상을 소비했다는 것은 의심의 여지가 없습니다. 즉, 마지막 단락에서 놀라지 않을 것이 없습니다. 이제 동영상이나 다른 미디어 파일을 내 웹사이트에 올리는 방법을 알아야 합니다. 미디어 추가에 필요한 기술 요구사항은 사용자 환경에 서비스되어야 합니다.
기술 요구사항
- 미디어 파일 버전은 오디오 및 동영상 스트림을 모두 포함하는 일반적인 웹 친화적인 형식입니다.
- 해상도가 사용자 기기에 적합합니다.
- 비트 전송률은 사용자의 네트워크 대역폭에 과부하를 주지 않습니다.
- 결과는 적절한 기술을 사용하여 모든 주요 브라우저에서 볼 수 있습니다.
- 파일이 암호화되어 있습니다 (선택사항).
이 웹사이트의 미디어 섹션은 이러한 기술 요구사항을 충족하는 데 도움이 됩니다. 이러한 개념이 아직 좀 추상적이더라도 걱정하지 마세요. 이에 대해서는 모든 도움말에서 점진적으로 설명할 것입니다. 첫 번째 섹션에서는 미디어의 기본 개념을 학습한 다음, 두 번째 섹션에서는 웹에 미디어를 추가하는 방법을 알아보고, 마지막 섹션에서는 웹에서 미디어를 사용하는 실용적인 응용 프로그램과 몇 가지 고급 기술을 알아봅니다.
웹에 동영상 표시 중
사이트에 동영상을 표시할 때는 네 가지 접근 방식을 사용할 수 있습니다.
- YouTube 또는 Vimeo와 같은 미디어 호스팅 제공업체에 동영상을 업로드합니다. 이 옵션을 사용하려면 사이트에 플레이어를 삽입해야 합니다.
- HTML
<video>및<audio>요소를 사용하는 기본 자체 호스팅 삽입 - Shaka Player, JW Player 또는 Video.js와 같은 동영상 라이브러리를 사용하여 모든 기능을 갖춘 임베딩.
- 자체 미디어 서버 및 스트리밍 애플리케이션 빌드
이 사이트에서는 주로 미디어 삽입의 기본사항을 다룹니다. 하지만 자체 미디어 스트리밍 애플리케이션을 빌드할 수 있도록 몇 가지 고급 주제를 다룹니다. 이는 간단한 작업이 아니므로 참조로 사용할 오프라인 지원이 포함된 미디어 PWA를 빌드했습니다. 이를 통해 이를 실행하는 방법과 필요한 노력이 무엇인지 알 수 있습니다. 이 애플리케이션은 YouTube나 Vimeo와 같은 서비스의 프로덕션 지원 서비스나 경쟁 제품이 아니지만 도전적이고 새로운 것을 배울 수 있는 출발점을 제공합니다.
솔직히 말하자면, 호스팅 미디어 서비스와 경쟁하는 플랫폼을 구축하려면 전문 엔지니어로 구성된 팀과 수천 시간의 인력이 필요했습니다. 경쟁자로 해당 시장에 진입하는 것이 목표가 아니라면 다른 방법 중 하나를 사용하는 것이 좋습니다. 기술을 이해하는 것이 좋습니다. 자체 애플리케이션이나 동영상 플레이어를 출시할 수는 없지만, 최첨단 브라우저 지원을 살펴보고 실험하거나 적어도 기존 동영상 라이브러리 중 하나를 사용해 보면 도움이 됩니다.
학습할 내용
media 컬렉션은 세 부분으로 구성됩니다. 이 첫 번째 섹션에서는 사이트에 미디어를 추가하기 위한 개념과 기본 요건 정보를 제공합니다. 여기에는 미디어 파일이 구성되는 방식, 웹용 파일을 준비하는 데 필요한 애플리케이션에 관한 기본사항, 스트리밍 개념에 대한 설명이 포함됩니다. 두 번째 섹션에서는 파일을 준비하여 다양한 형식으로 변환하고 선택적으로 암호화를 추가하는 방법을 설명합니다. 마지막 섹션에서는 웹페이지에 미디어 파일을 삽입하고, 자동재생 권장사항을 설명하고, 미디어 프레임워크를 사용하며, 동영상을 오프라인으로 저장하고, 동영상에 액세스할 수 있도록 설정하는 방법을 보여줍니다.
다뤄야 할 내용이 많으므로 미디어 파일 기본사항부터 시작하겠습니다.