サポートに連絡する| システムステータス
ページコンテンツ

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

    このトピックでは、カスタムプラグインにデータを渡す方法を学習します。
     

    ステップ

    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 オブジェクトを渡します。
      studio plugin configuration

    完全なコード

    プラグインコード

    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>

    ページの最終更新日05 May 2022