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