概要:プレーヤー API
プレーヤーを参照する
API 関数を使用するには、プレーヤーオブジェクトにアクセスする必要があります。これは簡単です。動画タグにIDがあることを確認するだけです。埋め込みコードの例には ID がありmyPlayerID
、Player myPlayer
オブジェクトは変数に格納されます。1 ページに複数の動画がある場合は、すべての動画タグに一意の ID があることを確認してください。
var myPlayer = videojs.getPlayer('myPlayerID');
プレーヤー準備方法
Video.js がビデオと API をセットアップするのにかかる時間は、接続速度などの複数の要因によって異なります。そのため、ready()
プレーヤーのメソッドを使用して、プレーヤーの API を必要とするコードをトリガーします。
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
// EXAMPLE: Handle an event
myPlayer.on('loadstart',doLoadstart);
});
プレーヤー対応vs.プレーヤー対応のビデオ
このドキュメントの関連事項から、これはAPIの安全な使用であると考えるかもしれません。
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
// Play the video in the player
myPlayer.play()
});
プレーヤーがインタラクションの準備ができているという問題は、プレーヤーのビデオがロードされ、この例では再生される準備ができていることを保証するものではありません。このため、loadedmetadata
ビデオを再生する準備ができていることを保証するイベントを使用する必要があります。コードは次のように表示されます。
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
// Play the video in the player
myPlayer.on('loadedmetadata',function(){
myPlayer.play();
})
});
play()
メソッドを呼び出すことが関数で実行する唯一のタスクであり、別の方法でプレーヤーと対話するつもりがない場合、このコードを簡略化することができます(ready()
メソッド):
videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){
var myPlayer = this;
myPlayer.play();
});
API メソッド
準備ができたプレーヤーにアクセスできるので、ビデオを制御したり、値を取得したり、ビデオイベントに応答したりできます。Video.js API 関数名は、 HTML5 メディア API に従います。主な違いは、ゲッター/セッター関数がビデオプロパティに使用されることです。
// setting a property on a bare HTML5 video element
myVideoElement.currentTime = "120";
// setting a property on a Video.js player
myPlayer.currentTime(120);
プレーヤー API のメソッドとイベントの完全なリストは、プレーヤー API ドキュメントに記載されています。