ビデオをプレーヤーに割り当てるプログラムによるプレーヤーへのビデオの割り当て

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>タグが含まれています。ビデオのビデオクラウド 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 getVideo()load()とプレーヤーカタログとメソッドを使用して、目的のビデオを動的に取得して再生できます。

• 1 ～ 8 行目:data-video-id属性の値を持たない詳細な (ページ内埋め込み) コード。
• 11,17 行目:ready()メソッドを使用して、プレイヤーが行動する準備ができていることを確認します。
• 12行目です:this関数内でと呼ばれるプレーヤーを変数に関連付けます。
• 13,16号線:Video Cloud ID とコールバック関数をパラメーターとして使用して、getVideo()カタログのメソッドを使用します。
• 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にビデオを設定する

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

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

また、JavaScript を使用して iframe src属性のクエリ文字列を変更して、再生する新しいビデオをプレーヤーに通知することもできます。

• 1-2行目は次のとおりです。iframe 実装コード。クエリ文字列 ( ? の後のテキストキャラクター) は、再生するビデオの ID を指定します。
• 5行目:ビデオが変更されるときに呼び出される関数を定義します。
• 6行目:JavaScriptを使用するgetElementsByTagName()配置する方法<iframe>変数にタグを付けます。このメソッドは、ページ上で一致するすべての要素の配列を返すことに注意してください。ページ上の最初の（そして唯一の）iframeタグを使用しているので、配列の0番目の要素を使用することができます。
• 7行目:古いものを置き換えるクエリ文字列を作成します。これは、再生する新しいビデオを定義します。
• 8行目:srciframeタグのプロパティを変数に割り当てます。
• 9行目:プレーヤーのソースから古いクエリ文字列を引いた抽出します。
• 10行目です:プレーヤーソースを新しいビデオのクエリ文字列定義と組み合わせて、srcプロパティの新しい値を構築します。
• 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>