へのビデオの割り当て Player プログラム的に

URLを介してビデオIDを設定する

URL実装を使用し、再生されるビデオを動的に変更することは可能です。 これを行うには、フォームのURLの最後にクエリ文字列を使用します ?videoId=YOUR_VIDEO_ID 次の例に示すように、

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

参照IDの使用

このドキュメントのすべての例では、ビデオIDが使用されています 参照ID 置換することができる。 参照IDを使用する場合は、その識別子の前に ref：。 たとえば、最初のURLは動画IDを使用し、2番目のURLは参照IDを使用します。

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

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

ページはめ込みコードには <video> タグ。 ザ· Video Cloud 動画のIDは data-video-id HTML 5 データ 属性。

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

JavaScriptを使用してビデオを設定する

多くの場合、どのビデオを再生するかを制御するユーザーインタラクションが必要です。 これを行うには、JavaScriptと player カタログの getVideo() 更に load() 所望のビデオを動的に取り出して再生する方法。

• 行1-8：アドバンスト（ページはめ込み）コードで、 data-video-id 属性。
• 11,17、XNUMX行目： ready() 確実にする方法 player 行動する準備ができています。
• 12行目： playerと呼ばれる this 関数では、変数を使用します。
• ライン13,16：カタログの使用 getVideo() メソッドを使用して Video Cloud IDおよびコールバック関数をパラメータとして使用します。
• ライン15：カタログの使用 load() メソッドを呼び出してビデオを読み込んで再生します。

  <video-js id="myPlayerID"
    data-account="1507807800001"
    data-player="3bc25a34-086a-4060-8745-dd87af3d53b4"
    data-embed="default"
    data-video-id=""
    class="video-js"
    controls></video-js>
  <script src="https://players.brightcove.net/1507807800001/3bc25a34-086a-4060-8745-dd87af3d53b4_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に設定する

ビデオを指定するには player iframeでホストされている場合、URLのクエリ文字列を介して動画ID（または前述の参照ID）を渡すことができます。 例えば：

  <iframe src='https://players.brightcove.net/.../index.html?videoId=2114345471001'
    allowfullscreen
    webkitallowfullscreen
    mozallowfullscreen></iframe> 

JavaScriptを使用してiframeのクエリ文字列を変更することもできます src 伝える属性 player 再生する新しいビデオ。

• 1-2：iframe実装コード。 クエリ文字列（ ? キャラクター）は、再生するビデオのIDを提供します。
• Line 5：ビデオを変更するときに呼び出される関数を定義します。
• 行6：JavaScriptを使用する getElementsByTagName() 配置する方法 <iframe> タグを変数に追加します。 このメソッドは、ページ上のすべての一致する要素の配列を返します。ページ上の最初の（そして唯一の）iframeタグを使用しているため、配列の0番目の要素を使用できます。
• Line 7：古いものを置き換えるクエリ文字列を作成します。 これは、再生される新しいビデオを定義します。
• Line 8：変数に代入する src のプロパティ iframe タグ。
• 9行目：ソースを抽出します player、古いクエリ文字列を差し引いたもの。
• Line 10：新しい値を構築します。 src プロパティを組み合わせて player 新しい動画のクエリ文字列定義を持つソース。
• ライン11：新しいソース/ビデオ情報を <iframe> タグ src プロパティ。

<iframe src='https://players.brightcove.net/...c_default/index.html?videoId=4341341161001'
    allowfullscreen webkitallowfullscreen mozallowfullscreen></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>