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