概要: プレーヤー API

プレーヤーの参照

API 関数を使用するには、プレーヤー オブジェクトにアクセスする必要があります。これは簡単に行えます。video タグに ID が設定されていることを確認するだけです。サンプルの埋め込みコードでは ID に myPlayerID を使用しており、プレーヤー オブジェクトは myPlayer 変数に格納されます。1 ページに複数の動画がある場合は、各 video タグに一意の ID を設定してください。

      var myPlayer = videojs.getPlayer('myPlayerID');

プレーヤーの ready メソッド

Video.js が動画および API をセットアップするまでにかかる時間は、接続速度など複数の要因によって異なります。そのため、プレーヤーの API を必要とするコードを実行するには、プレーヤーの ready() メソッドを使用します。

      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
      
        // 例: イベントの処理
        myPlayer.on('loadstart',doLoadstart);
      
      });

プレーヤーの ready とプレーヤー内の動画の ready の違い

本ドキュメントの説明から、次のような API の使い方は安全だと思われるかもしれません。

      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        // プレーヤー内の動画を再生
        myPlayer.play()
      });

しかし、プレーヤーが操作可能な状態になったからといって、プレーヤー内の動画が読み込まれ、再生可能な状態になっているとは限りません。この例では再生を行っていますが、そのためには loadedmetadata イベントを使用する必要があります。このイベントは、動画が再生可能な状態であることを保証します。コードは次のようになります。

      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        // プレーヤー内の動画を再生
        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 に準拠しています。主な違いは、動画のプロパティに対してゲッター／セッター関数が使用される点です。

      // 素の HTML5 video 要素にプロパティを設定
      myVideoElement.currentTime = "120";
      
      // Video.js プレーヤーにプロパティを設定
      myPlayer.currentTime(120);

プレーヤー API のすべてのメソッドおよびイベントの一覧は、プレーヤー API ドキュメントを参照してください。