DRM용 브라이트코브 플레이어 구성

FairPlay 보호 콘텐츠와 함께 DRM 플러그인을 사용하려면 다음 단계를 따르십시오.

1. HTML 페이지의 헤더에 플러그인의 스타일 시트를 포함하십시오.

       <link href="https://players.brightcove.net/videojs-drm/5/videojs-drm.css" rel="stylesheet">

2. 플러그인의 자바 스크립트를 포함:

       <script src="https://players.brightcove.net/videojs-drm/5/videojs-drm.min.js"></script>

3. 페이지의 JavaScript 블록에서 다음을 제공하여 FairPlay 자격 증명 정보로 EME 플러그인을 호출하고 구성합니다. getCertificate , getContentId과 getLicense EME 플러그인에 대한 기능. 이러한 기능은 사용자의 FairPlay 라이선스 서버 구현에 따라 다르며 실행 전에 EME 플러그인으로 직접 전달 될 수 있습니다. src설정 됨 :

       <script type="text/javascript">
         videojs.getPlayer('myPlayerID').ready(function() {
           var myPlayer = this;
           myPlayer.eme({
             keySystems: {
               'com.apple.fps.1_0': {
               getCertificate: function (emeOptions, callback) {
               // request certificate
               // if err, callback(err)
               // if success, callback(null, certificate) where certificate
               // is a Uint8Array
             },
             getContentId: function (emeOptions, initData) {
               // return content ID as a string
               },
               getLicense: function (emeOptions, contentId, keyMessage, callback) {
                 // request key
                 // if err, callback(err)
                 // if success, callback(null, key) as an arraybuffer
               }
             }
           }
         });
       </script>

FairPlay 정보는 각각의 일부로 전달할 수도 있습니다. src목적. 그만큼 emeOptions모든 기능에 대한 매개 변수로 제공됩니다. 현재 소스의 소스 옵션과 병합 된 (덮어 쓰는) 플러그인 옵션에 대한 참조입니다. 옵션에 쉽게 액세스 할 수 있도록하여 직접 유지 관리 할 필요가 없습니다.

    player.src({
      type: 'application/vnd.apple.mpegurl',
      src: 'http://www.example.com/path/to/master.m3u8',
      keySystems: {
        "com.apple.fps.1_0": {
          getCertificate: function(emeOptions, callback) { ... },
          getContentId: function(emeOptions, initData) { ... },
          getLicense: function(emeOptions, contentId, keyMessage, callback) { ... }
        }
      }
    });

예를 들어, applicationId과 publisherId에 대한 getCertificate요청하면 다음과 같이 플러그인 옵션을 전달할 수 있습니다.

    {
      keySystems: {
        "com.apple.fps.1_0": {
          getCertificate: function(emeOptions, callback) {
          var applicationId = emeOptions.applicationId; // 'application-id'
          var publisherId = emeOptions.publisherId; // 'publisher-id'
          // ...
        }
          // ...
        }
      },
      applicationId: 'application-id'
      publisherId: 'publisher-id'
    }

또는 특정 소스가 필요한 경우 publisherId소스 옵션을 통해 덮어 쓸 수 있습니다.

    // plugin options
    {
      keySystems: {
        "com.apple.fps.1_0": {
        getCertificate: function(emeOptions, callback) {
        var applicationId = emeOptions.applicationId; // 'application-id'
        var publisherId = emeOptions.publisherId; // 'source-specific-publisher-id'
        // ...
      },
        // ...
      }
    },
    applicationId: 'application-id'
    publisherId: 'publisher-id'
    }
    // source options
    player.src({
      src: '<URL>',
      type: 'application/vnd.apple.mpegurl',
      publisherId: 'source-specific-publisher-id'
    });

다음은 다음과 같이 옵션을 전달하는 구현의 예입니다. src옵션, 호스트 이름에서 콘텐츠 ID 검색, 고정 라이선스 및 인증서 URI, 키 메시지 본문이 포함 된 POST가 필요한 라이선스 URI :

    var uint8ArrayToString = function(array) {
    return String.fromCharCode.apply(null, new Uint16Array(array.buffer));
    };
    var getHostnameFromUri = function(uri) {
      var link = document.createElement('a');
      link.href = uri;
      return link.hostname;
    };
    var getCertificate = function(emeOptions, callback) {
      videojs.xhr({
        uri: emeOptions.certificateUri,
        responseType: 'arraybuffer'
        }, function(err, response, responseBody) {
        if (err) {
          callback(err);
          return;
        }
        callback(null, new Uint8Array(responseBody));
      });
    };
    var getContentId = function(emeOptions, initData) {
      return getHostnameFromUri(uint8ArrayToString(initData));
    };
    var getLicense = function(emeOptions, contentId, keyMessage, callback) {
      videojs.xhr({
        uri: emeOptions.licenseUri,
        method: 'POST',
        responseType: 'arraybuffer',
        body: keyMessage,
        headers: {
          'Content-type': 'application/octet-stream'
        }
        }, function(err, response, responseBody) {
        if (err) {
          callback(err);
          return;
        }
        callback(null, responseBody);
      });
    };
    player.src({
      type: 'application/vnd.apple.mpegurl',
      src: 'http://www.example.com/path/to/master.m3u8',
      keySystems: {
        "com.apple.fps.1_0": {
        getCertificate: getCertificate,
        getContentId: getContentId,
        getLicense: getLicense
      }
      },
      certificateUri: 'http://example.com/fairplay/certificate/endpoint',
      licenseUri: 'http://example.com/fairplay/license/endpoint'
    });

Widevine Modular 콘텐츠의 경우 플레이어의 소스 핸들러를 사용하여 Widevine 라이선스 서버를 사용하도록 플레이어를 구성해야합니다.

웹 페이지에서 플레이어의 인스턴스를 업데이트하려면 플레이어의 소스 핸들러를 사용할 수 있습니다. 다음은 사용 예입니다. keySystemsOptions 배열player.src() 함수:

    player.src({
      src: 'http://example.com/my/manifest.mpd',
      type: 'application/dash+xml',
      keySystemOptions: [
      {
        name: 'com.widevine.alpha',
        options: {
        licenseUrl: 'http://m.widevine.com/proxy'
      }
      }]
    });

당신은 또한 사용할 수 있습니다updateSourceData 다음과 같이 기능 :

    videojs.Html5DashJS.updateSourceData = function(source) {
    source.keySystemOptions = [{
    name: 'com.widevine.alpha',
    options: {
    serverURL:'https://example.com/anotherlicense'
    }
    }];
    return source;
    };

자세한 내용은 videojs-contrib-dash GitHub에 대한 정보.