サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

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

    このトピックでは、動画を動的に変更する方法を学びます player。 これを行うには、プログラムで変更します player インスタンス。 このドキュメントでは、 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>  

    ページの最終更新日:28年2020月XNUMX日