웹페이지에 미디어를 추가하는 방법에는 여러 가지가 있습니다. 앞에서 표준 <video> 태그를 사용하는 방법을 알아봤습니다. 이 도움말에서는 기본 HTML5 동영상 플레이어의 동작을 확장하거나 교체하는 데 사용할 수 있는 몇 가지 미디어 프레임워크 (또는 라이브러리)를 설명합니다.
미디어 프레임워크는 독점적 및 오픈소스 다양성을 지원하며, 그 핵심에는 다양한 컨테이너 형식 및 전송 프로토콜의 오디오 또는 동영상 재생을 지원하는 API 집합이 있습니다. 좋은 프레임워크는 모듈식 아키텍처로 구성되어 있으며 명확하고 자세한 문서를 제공합니다. 또한 상대적으로 쉽게 설정하고 사용할 수 있는 것이 이상적입니다. HTML5 동영상 플레이어에서 이미 대부분의 기능을 제공하는데 왜 프레임워크나 라이브러리를 사용해야 할지 고민할 것입니다. 좋은 질문입니다. 자세히 살펴보겠습니다.
프레임워크 사용의 이점
기본 웹페이지의 필요를 초과하는 대부분의 상황에서 콘텐츠를 제공하는 데 미디어 프레임워크를 사용하고자 할 것입니다. 오프라인 재생, 스트리밍, 분석, PIP 모드, 미리보기 썸네일, 임베딩, 수익 창출(예: 유효노출률 최적화, 광고 예약, 헤더 입찰)과 같은 다양한 기능을 개발하고 유지할 준비가 되어 있지 않다면 이러한 복잡성을 기존 솔루션에 덜어 주어야 합니다.
이때 미디어 프레임워크가 필요합니다. 일련의 기능과 이러한 기능을 사용할 수 있는 조건을 제공한 후 프로젝트에 적합한 프레임워크를 결정해야 합니다. 다음 도움말에서는 여러 복잡한 기능을 구현하는 오프라인 스트리밍이 포함된 PWA를 빌드한 방법을 설명합니다. 스포일러 주의. 작업이 많았고 아직 프로덕션 지원 솔루션이 되지 못했습니다. 골치 아픈 일을 줄이고 프레임워크를 사용하세요.
선택할 수 있는 옵션이 많습니다. 이 문서에서는 Shaka Player, JW Player, Video.js의 세 가지 옵션을 중점적으로 다룹니다.
샤카 플레이어
문서에 따르면 Google의 Shaka Player는 적응형 미디어용 오픈소스 JavaScript 라이브러리입니다. 플러그인을 사용하지 않고 브라우저에서 적응형 미디어 형식 (예: DASH 및 HLS)을 재생합니다. 대신 Shaka Player는 개방형 웹 표준 MediaSource 확장 프로그램 및 암호화된 미디어 확장 프로그램을 사용합니다.
또한 Shaka Player는 IndexedDB를 사용하여 미디어의 오프라인 저장 및 재생을 지원합니다. 콘텐츠는 모든 브라우저에 저장할 수 있습니다. 라이선스 스토리지는 브라우저 지원에 따라 다릅니다.
Shaka Player 문서 사이트에 기본 사용법이 있습니다. 그러나 Shaka Player를 사용하려면 먼저 동영상 또는 오디오 요소가 포함된 HTML 페이지를 만들어야 합니다. 그런 다음 애플리케이션의 JavaScript에서 polyfill을 설치하고 브라우저 지원 여부를 확인합니다. 브라우저에서 Shaka Player 지원을 확인하면 스크립트가 플레이어 객체를 만들어 미디어 요소를 래핑하고 오류를 수신 대기한 후 매니페스트 파일을 로드합니다. 그쪽에서 Shaka Player가 이어지게 됩니다.
Shaka를 사용하면 미디어 파일을 직접 호스팅하고 인코딩해야 합니다. 미디어 서버를 만드는 것은 지나치게 복잡하지 않지만, 미디어 인코딩/트랜스코딩은 시간이 오래 걸리고 복잡할 수 있습니다. Zencoder, Amazon Elastic Encoder, Google Transcoder API와 같은 서비스에 이 부분을 오프로드하여 반복 작업을 자동화하고 프로세스 속도를 높일 수 있습니다.
Shaka Player의 장점은 Shaka Packager라는 DASH 및 HLS 패키징 및 암호화를 위한 매우 유용한 도구와 미디어 패키징 SDK도 있다는 것입니다. 온라인 스트리밍을 위한 미디어 콘텐츠를 준비하고 패키징할 수 있습니다. 앞서 미디어 변환 및 미디어 암호화에서 알아봤습니다.
JW Player
호스팅 및 인코딩/트랜스코딩 서비스를 제공하는 옵션을 찾고 있다면 JW Player를 고려해 볼 수 있지만 JW Player는 독점 소프트웨어라는 점에 유의하세요. 즉, 플랫폼이나 로드맵을 많이 제어할 수 없습니다. 동영상에 워터마크가 표시되는 기본 무료 버전과 상업용 버전이 있습니다.
JW Player는 MPEG-DASH (유료 버전만 해당), DRM (디지털 권한 관리) (Vualto 포함), 양방향 광고, 인터페이스 맞춤설정, 삽입을 통한 스트리밍을 지원합니다. 잘 문서화된 API 및 SDK가 있습니다. 하지만 미디어를 빠르고 무료로 호스팅하는 방법을 찾고 있다면 YouTube 동영상을 임베딩하는 것이 무료 옵션이 될 수 있습니다.
Video.js
자사 웹사이트에 따르면 Video.js는 처음부터 HTML5에 맞게 구축되었습니다. HTML5 동영상은 물론 DASH 및 HLS와 같은 최신 스트리밍 형식과 YouTube, Vimeo를 지원합니다. 데스크톱과 휴대기기에서 동영상 재생을 지원하며 CSS 기반 스킨으로 어디서나 보기 좋게 표시됩니다.
Video.js를 사용하는 방법에는 여러 가지가 있지만 가장 쉬운 방법은 Fastly에서 제공하는 무료 CDN 버전을 사용하는 것입니다. 플레이어를 설정하는 방법에 관한 자세한 내용은 시작하기 페이지를 참고하세요. Video.js는 매우 강력한 동영상 플레이어이며 Shaka Player와 마찬가지로 동영상을 호스팅하고 인코딩해야 합니다. 하지만 한 가지 차이점은 Video.js 플레이어에서 YouTube 동영상을 재생하는 등의 작업을 할 수 있는 플러그인 시스템에 있다는 점입니다. 이러한 작업은 맞춤설정도 가능합니다.
기타 프레임워크
사용할 수 있는 다양한 프레임워크와 라이브러리가 있지만 이 문서에서는 무엇이 있는지만 간략하게 설명합니다. 프레임워크를 선택할 때는 프로젝트에 필요한 기능과 미디어를 호스팅, 인코딩 또는 트랜스코딩하는 방법을 고려해야 합니다. 프리롤 광고나 기타 수익 창출 전략이 필요한가요? 미디어를 오프라인에서 사용할 수 있나요? 예산이 어느 정도인가요? 또는 기타 여러 가지 사항을 고려해야 합니다. 철저히 조사하고 네트워크 내 사람들에게 제안을 요청하세요 이 외에도 수십 가지의 훌륭한 옵션이 있으며, 선택하기 전에 시간을 내어 팀에 적합한 옵션을 고르고 프로젝트 수명 주기 동안 불필요한 기술적 부채 또는 복잡성을 유지해야 합니다.
다음으로 어려운 작업을 처리할 프레임워크 없이 HTML5 동영상 객체만 사용하여 자체 솔루션을 실행할 때 발생하는 주요 과제에 접근하고 해결하는 방법을 보여주기 위해 Google에서 빌드한 오프라인 스트리밍이 포함된 PWA에 대해 알아봅니다.