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>