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