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

手順

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=""
        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>