웹페이지에 미디어를 추가하는 방법에는 여러 가지가 있습니다. 이전에는 표준 <video> 태그를 사용하는 방법을 알아봤습니다. 이 도움말에서는 기본 HTML5 동영상 플레이어의 동작을 확장하거나 대체하는 데 사용할 수 있는 몇 가지 미디어 프레임워크 (또는 라이브러리)에 대해 알아봅니다.
미디어 프레임워크는 독점형과 오픈소스형 모두 있으며 핵심은 다양한 컨테이너 형식과 전송 프로토콜의 오디오 또는 동영상 재생을 지원하는 API 모음입니다. 우수한 프레임워크는 모듈식 아키텍처를 갖추고 명확하고 상세한 문서를 제공합니다. 설정 및 사용이 비교적 간편한 것도 좋습니다. 'HTML5 동영상 플레이어에서 이미 대부분의 기능을 제공하는 경우 프레임워크나 라이브러리를 사용해야 하는 이유는 무엇인가요?'라고 궁금하실 수 있습니다. 좋은 질문입니다. 자세히 알아보겠습니다.
프레임워크 사용의 이점
기본 웹페이지의 요구사항을 넘어서는 대부분의 상황에서는 미디어 프레임워크를 사용하여 콘텐츠를 게재하는 것이 좋습니다. 오프라인 재생, 스트리밍, 분석, PIP, 미리보기 썸네일, 삽입, 수익 창출(예: 게재율 최적화, 광고 예약, 헤더 입찰)과 같은 풍부한 기능 세트를 개발하고 유지할 준비가 되어 있지 않다면 이러한 복잡성을 기존 솔루션으로 오프로드하는 것이 좋습니다.
여기서 미디어 프레임워크가 사용됩니다. 프레임워크는 일련의 기능과 이러한 기능을 사용할 수 있는 조건을 제공하며, 개발자는 프로젝트에 적합한 프레임워크를 결정해야 합니다. 다음 도움말에서는 여러 복잡한 기능을 구현하는 오프라인 스트리밍이 포함된 PWA를 빌드하는 방법을 설명합니다. 스포일러 경고: 많은 작업이 필요했으며 아직 프로덕션 준비가 완료된 솔루션과는 거리가 멉니다. 프레임워크를 사용하면 골치 아픈 문제를 해결할 수 있습니다.
선택할 수 있는 옵션이 많지만 이 도움말에서는 Shaka Player, JW Player, Video.js 등 세 가지에 중점을 둡니다.
Shaka Player
문서에 따르면 Google의 Shaka Player는 적응형 미디어를 위한 오픈소스 JavaScript 라이브러리입니다. 플러그인을 사용하지 않고 브라우저에서 적응형 미디어 형식 (예: DASH 및 HLS)을 재생합니다. 대신 Shaka Player는 개방형 웹 표준인 MediaSource 확장 프로그램 및 암호화된 미디어 확장 프로그램을 사용합니다.
Shaka Player는 IndexedDB를 사용하여 미디어의 오프라인 저장 및 재생도 지원합니다. 콘텐츠는 모든 브라우저에 저장할 수 있습니다. 라이선스 저장은 브라우저 지원에 따라 다릅니다.
Shaka Player 문서 사이트에서 기본 사용에 관한 안내를 확인할 수 있습니다. 하지만 간단히 말해 Shaka Player를 사용하려면 먼저 동영상 또는 오디오 요소가 포함된 HTML 페이지를 만들어야 합니다. 그런 다음 애플리케이션의 JavaScript에서 폴리필을 설치하고 브라우저 지원을 확인합니다. 브라우저에서 Shaka Player 지원을 확인하면 스크립트는 미디어 요소를 래핑하고 오류를 리슨한 다음 매니페스트 파일을 로드하는 Player 객체를 만듭니다. 그 후부터는 Shaka Player가 처리합니다.
Shaka를 사용하려면 미디어 파일을 직접 호스팅하고 인코딩해야 합니다. 미디어 서버를 만드는 것은 그리 복잡하지 않지만 미디어 인코딩/트랜스코딩은 시간이 많이 걸리고 복잡할 수 있습니다. 반복적인 작업을 자동화하고 프로세스 속도를 높이려면 이 부분을 Zencoder, Amazon Elastic Encoder, Google Transcoder API와 같은 서비스에 오프로드하는 것이 좋습니다.
Shaka 플레이어의 좋은 점은 DASH 및 HLS 패키징 및 암호화를 위한 정말 멋진 도구와 미디어 패키징 SDK인 Shaka Packager도 있다는 것입니다. 온라인 스트리밍을 위한 미디어 콘텐츠를 준비하고 패키징할 수 있습니다. 이 내용은 앞의 미디어 변환 및 미디어 암호화에서 다뤘습니다.
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 동영상을 재생하는 등의 작업을 할 수 있는 플러그인 시스템에 있습니다. 이 플러그인 시스템은 맞춤설정할 수도 있습니다.
기타 프레임워크
다양한 프레임워크와 라이브러리를 사용할 수 있으며 이 도움말에서는 그중 일부만 소개합니다. 프레임워크를 선택할 때는 프로젝트에 필요한 기능과 미디어를 호스팅하고 인코딩 또는 트랜스코딩할 계획을 고려해야 합니다. 프리롤 광고 또는 기타 수익 창출 전략이 필요하신가요? 미디어를 오프라인에서 사용할 수 있나요? 예산이 어느 정도인가요? 또는 기타 여러 가지 고려사항 조사를 진행하고 내 네트워크에 있는 사람들에게 추천을 요청하세요. 다른 여러 가지 훌륭한 옵션이 있습니다. 선택하기 전에 시간을 내어 팀에 적합한 옵션을 선택하고 프로젝트 수명 주기 동안 유지 관리하는 데 불필요한 기술적 부채나 복잡성을 만들지 않도록 하세요.
다음으로, 오프라인 스트리밍이 포함된 PWA에 대해 알아봅니다. 이 PWA는 프레임워크 없이 HTML5 동영상 객체만 사용하여 자체 솔루션을 배포할 때 발생하는 주요 문제를 해결하는 방법을 보여주기 위해 빌드되었습니다.