概要:プレーヤー API

プレーヤーを参照する

API機能を使用するには、プレーヤーオブジェクトへのアクセスが必要です。これは簡単に行えます。video タグにIDが設定されていることを確認するだけです。以下の例では、埋め込みコードのIDはmyPlayerIDであり、プレーヤーオブジェクトは myPlayer 変数に格納されます。ページに複数の動画がある場合は、各 video タグにユニークな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);

});

プレーヤーの準備と、プレーヤー準備後のビデオ

このドキュメントで説明された内容から、これが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に従っています。主な違いは、ビデオプロパティにはgetter/setter関数が使用されることです。

// 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 ドキュメントに記載されています。