プレイヤー開発者の基本:カスタムプラグイン-データの受け渡し

ステップ

1. カスタムプラグインコードで、optionsプラグインを定義する無名関数にパラメーターを配置します。

   videojs.registerPlugin('navigateOnVideoEnd', function (options) {
     var myPlayer = this;
     ...
   });

2. カスタマイズのために、プラグインコードでパラメータオブジェクトの必要なプロパティを使用します。

   videojs.registerPlugin('navigateOnVideoEnd', function (options) {
     var myPlayer = this;
     ...
     window.location.href = options.redirectURL;
   });

3. プラグインを呼び出す HTML ページで、必要なプロパティ/プロパティを持つオブジェクトを構築します。

   <script>
     videojs.getPlayer('myPlayerID').ready(function() {
       var myPlayer = this,
          options = {"redirectURL": "http://support.brightcove.com"};
       ...
     });
   </script>

4. カスタムプラグインを呼び出すときは、optionsオブジェクトをパラメータとして渡します。

   <script>
     videojs.getPlayer('myPlayerID').ready(function() {
       var myPlayer = this,
          options = {"redirectURL": "http://support.brightcove.com"};
       myPlayer.navigateOnVideoEnd(options);
     });
   </script>

5. Studio を使用している場合は、Options (JSON) フォーム要素を使用してカスタムプラグインに options オブジェクトを渡します。

   

完全なコード

プラグインコード

videojs.registerPlugin('navigateOnVideoEnd', function (options) {
  var myPlayer = this;
  myPlayer.on('ended', function () {
    window.location.href = options.redirectURL;
  });
});

HTML ページ呼び出しコード

<video-js id="myPlayerID"
  data-video-id="5701193190001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id
  class="video-js"
  controls
  width="640"
  height="360"></video-js>
<script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script src="redirect.js"></script>

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
       options = {"redirectURL": "http://support.brightcove.com"};
    myPlayer.navigateOnVideoEnd(options);
  });
</script>