プレーヤーへの動画のプログラムによる割り当て

URL を使用して動画 ID を設定する

URL を使用して再生する動画を動的に変更できます。これを行うには、URL の末尾に ?videoId=YOUR_VIDEO_ID という形式でクエリ文字列を追加します。以下はその例です。

      https://players.brightcove.net/..._default/index.html?videoId=2114345471001
          

参照 ID の使用

このドキュメント内のすべての例で使用している動画 ID の代わりに、参照 ID を使用できます。 参照 ID を使用する場合、識別子の前に ref: を付ける必要があります。以下の例では、1 行目が動画 ID、2 行目が Reference ID を使用しています。

      https://players.brightcove.net/..._default/index.html?videoId=2114345471001
      https://players.brightcove.net/..._default/index.html?videoId=ref:1234abcd
          

タグ属性を使用して動画 ID を設定する

Videoタグ埋め込みコードには <video> タグが含まれています。 動画の Video Cloud ID は、HTML5 の data 属性である data-video-id に設定されています。

      <video-js
        data-account="1507807800001"
        data-player="dadff0fb-5635-4eac-a1b8-ab8c37a72be9"
        data-embed="default"
        data-video-id="2114345471001"
        controls=""></video-js>
      <script src="https://players.brightcove.net/1507807800001/dadff0fb-5635-4eac-a1b8-ab8c37a72be9_default/index.min.js"></script>
          

JavaScript を使用して動画を設定する

多くの場合、ユーザーの操作に応じて再生する動画をコントロールしたいことがあります。 これを実現するために、JavaScript とプレーヤーカタログの getVideo() および load() メソッドを使用して、目的の動画を動的に取得・再生できます。

• 1-10 行目: data-video-id の値が空の Videoタグ埋め込みコード。
• 13,19 行目: ready() メソッドを使用し、プレーヤーが操作可能な状態であることを保証。
• 14 行目: 関数内の this を変数に格納してプレーヤーを参照。
• 15,18 行目: カタログの getVideo() メソッドを使用し、Video Cloud ID とコールバックを渡す。
• 17 行目: カタログの load() メソッドを使用して動画を読み込み、再生。

      <video-js id="myPlayerID"
        data-account="1507807800001"
        data-player="rf1BTdKk6M"
        data-embed="default"
        controls=""
        data-video-id=""
        data-playlist-id=""
        data-application-id=""
        width="960" height="540"></video-js>
      <script src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.min.js"></script>
      
      <script type="text/javascript">
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
          myPlayer.catalog.getVideo('2114345471001', function(error, video) {
            // deal with error
            myPlayer.catalog.load(video);
          });
        });
      </script>
          

iframe 内の動画を設定する

iframe 内でホストされているプレーヤーに動画を指定するには、URL のクエリ文字列を使用して動画 ID（または前述の 参照 ID）を渡します。 例えば、次のようになります。

      <iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
        allowfullscreen=""
        allow="encrypted-media"
        width="960" height="540"></iframe>
          

また、JavaScript を使用して、iframe の src 属性に新しいクエリ文字列を設定し、プレーヤーに再生する動画を指示することも可能です。

• 1-4 行目: iframe 実装コード。? 以降のクエリ文字列が再生する動画 ID を指定します。
• 7 行目: 動画を変更する際に呼び出される関数を定義。
• 8 行目: getElementsByTagName() を使用して <iframe> タグを取得。配列で返されるため、最初の要素を使用。
• 9 行目: 新しい動画 ID を持つクエリ文字列を作成。
• 10 行目: iframe の src を変数に保存。
• 11 行目: 元の URL から古いクエリ文字列を取り除く。
• 12 行目: プレーヤーのベース URL と新しいクエリ文字列を結合し、新しい src の値を生成。
• 13 行目: 新しい src を iframe に適用。

      <iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
        allowfullscreen=""
        allow="encrypted-media"
        width="960" height="540"></iframe>
      
      <script type="text/JavaScript">
        function changeVideo() {
          var iframeTag = document.getElementsByTagName("iframe")[0],
            newVideo = "?videoId=3742256815001",
            theSrc = iframeTag.src,
            srcWithoutVideo = theSrc.substring(0, theSrc.indexOf("?")),
            newSrc = srcWithoutVideo + newVideo;
          iframeTag.src = newSrc;
        }
      </script>