Netflix, Amazon Prime과 같은 OTT(Over-the-Top) 플랫폼으로 대표되는 인터넷을 통한 비디오 스트리밍이 성장함에 따라 개발자 커뮤니티는 서버에서 클라이언트 기기로 콘텐츠를 전달하기 위해 필요한 프로토콜의 표준화에 대한 필요성을 인식했습니다. 이러한 프로토콜 중 하나는 비디오 전송에 있어서도 HTML5 표준을 집중적으로 사용하는 것입니다. 이제 HTML5 비디오 플레이어는 표준이 되고 있으며, 웹 브라우저에 미리 통합되어 있거나 쉽게 다운로드할 수 있습니다.

다양한 기기와 운영체제에 비디오 콘텐츠를 원활하게 전달하기 위한 또 한 가지 필수적인 요구조건은 HLS 및 DASH 스트리밍 프로토콜을 적용하는 것입니다. 이는 비디오 자료에 멀티 DRM 기술을 적용하여 적응형 스트리밍과 불법 복제를 방지하기 위한 보안의 기반을 이루고 있습니다.

Video.js는 이러한 비디오 스트리밍 플랫폼에 관한 모든 요구사항을 충족하는 HTML5 비디오 플레이어입니다. 이 오픈소스 비디오 플레이어는 최신식 비디오 형식을 재생할 수 있는 인기 있는 웹 플레이어의 하나로 전 세계 개발자 커뮤니티를 통해 디자인 및 기능성에 대한 적합성도 대단히 뛰어납니다.

콘텐츠 제작자와 OTT 기업들은 일반적으로 사용자 권한과 콘텐츠 암호화를 관리하기 위해 Google, Microsoft, Apple 등 3대 인터넷 대기업의 Widevine, PlayReady, FairPlay를 통해 각자가 제공하고 있는 DRM 라이선스 제도를 적용하고 있습니다. 그러므로 Video.js 플레이어와 멀티 DRM 서비스의 통합은 다양한 기기와 브라우저에서 비디오 콘텐츠를 원활하게 전달하기 위해 중요한 요소입니다.

이러한 통합은 Encrypted Media Extensions 사양을 지원하고 Video.js 플레이어가 웹 브라우저의 콘텐츠 암호 해독 모듈(Content Decryption Module, CDM)과 통신할 수 있게 해주는 VideoJS Contrib EME 플러그인을 통해 이루어집니다. 플러그인을 사용하면 CDM이 비디오 청크 해독을 시작하기 전에 사용자가 DRM 라이선스 URL를 전달할 수 있게 해줍니다. 또한, 개발자는 소스와 해당 핵심 시스템, 코덱 조합에 특화된 고유의 기법을 지정할 수 있습니다.

개발자는 통합 과정에서 각각의 DRM 체제에 대해 별도로 코드를 지정해야 합니다.

FairPlay로 Video.js 플레이어 구성하기:

1.URL로 인증서/라이선스 받기

이 방식에서 keySystems 개체는 certificateUri 및 licenseUri 속성뿐만 아니라 certificateHeaders와 licenseHeaders 같은 선택적 속성을 필요로 합니다. videojs-contrib-eme는 인증서를 가져오기 위해 certificateUri에 GET 요청을 보내고, initData에서 contentID를 얻습니다. 그런 다음 licenseUri로 POST 요청을 보내어 라이선스를 가져옵니다. 여기에는 Content-type: application/octet-stream라는 기본 헤더가 있습니다.

2. 기능별로 인증서/콘텐츠 ID/라이선스 받기

이 방식은 PallyCon 등 주요 다중 DRM 공급업체에서 선호하는 방식으로, Video.js 플레이어가 속성이 아닌 getCertificate(), getContentId(), getLicense() 메소드를 통해 라이선스를 가져옵니다. 인증서, 콘텐츠 ID 및 라이선스의 비동기 검색을 허용합니다.

PlayReady로 Video.js 플레이어 구성하기:

플러그인은 keySystems 객체의 세 가지 방법을 통해 이루어집니다. 개발자는 이러한 세 가지 방법 중 한 가지를 선택할 수 있습니다.
1. keySystems 값이 true로 설정되어 있으면 플러그인은 브라우저를 통해 전달된 destinationURI에 POST 요청을 보내며, 이 메시지에는 헤더 및 본문 구성요소가 포함되어 있습니다.
2. 두 번째 방법으로 개발자는 POST 요청이 메시지 내 헤더와 본문과 함께 URL로 이루어지는 URL을 통해 키를 가져올 수 있습니다. licenseHeaders 개체도 사용할 수 있습니다.
3. 세 번째 방법은 메시지 버퍼와 destinationURI를 사용하는 getKey 함수를 사용하는 것입니다. 콜백을 하면 이에 따라 라이센스 키를 반환합니다.

Widevine으로 Video.js 플레이어 구성하기:

Google의 Widevine은 통합을 위해 EME 사양을 따릅니다. 이 DRM의 경우, URL을 keySystems 개체의 속성으로 만들 수 있고, licenseHeaders 개체에 widevineToken을 추가할 수 있습니다. 또한, FairPlay 구성에서와 마찬가지로 필요한 경우 인증서를 검색하기 위해 getCertificate() 함수를 사용할 수 있습니다.

VideoJS Contrib EME 플러그인은 videoCapabilities 및 audioCapabilities 기능 등 MediaKeySystemConfiguration 개체의 전체 옵션을 정의하고, 이러한 항목 내부의 contentType과 강건성 기능들을 정의할 수 있습니다.

HTML5 플레이어를 PallyCon의 멀티 DRM 서비스와 통합하기 위해 클라이언트는 플레이어에서 제공되는 DRM 관련 API를 통해 Custom HTTP Header에 Custom Data나 PallyCon 라이선스 발급용 Token을 설정해야 합니다. PallyCon은 웹사이트에서 Video.js와 기타 다양한 HTML5 플레이어를 위해 DRM 통합 샘플코드를 제공하고 있습니다.