DRM 用に Brightcove Player を設定する

FairPlay で保護されたコンテンツで DRM プラグインを使用するには、以下の手順に従ってください。

1. HTML ページのヘッダーに、プラグインのスタイルシートを含めます。

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

2. プラグインの JavaScript を含めます。

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

3. ページの JavaScript ブロック内で、EME プラグインに getCertificate、getContentId、getLicense 関数を提供することにより、FairPlay 認証情報を指定して EME プラグインを呼び出し、設定します。これらの関数は、お客様独自の FairPlay ライセンス サーバー実装に固有のものであり、src が設定される前に EME プラグインに直接渡すことができます。

     <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) { ... }
      }
    }
  });

たとえば、getCertificate リクエストで applicationId および publisherId を使用する必要がある場合、次のようにプラグイン オプションを渡すことができます。

  {
    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 ライセンス サーバーを使用するようにプレーヤーを設定する必要があります。

Web ページ上のプレーヤーのインスタンスを更新するには、プレーヤーのソース ハンドラーを使用できます。以下は、player.src() 関数とともに keySystemsOptions 配列を使用する例です。

  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;
  };

詳細については、GitHub 上の videojs-contrib-dash の情報をご参照ください。