キューポイントをプログラムで実装する

Video Cloud キューポイント

このセクションでは、カタログ キューポイントの設定方法と、カタログ キューポイントのイベント ディスパッチを受け取る方法について説明します。

Video Cloud キューポイントの設定

Video Cloud キューポイントは、Video Cloud Studio を使用して動画に関連付けることができます。そのほかの方法については、次のドキュメントで詳しく説明されています: Media モジュールでのキューポイントの操作。

Video Cloud キューポイントの処理 - プレーヤーに静的にバインドされた動画

このセクションでは、動画がプレーヤーに静的にバインドされている場合、つまり動画が Studio または Player Management API を使用してプレーヤーに読み込まれている場合に、カタログ キューポイントを処理する方法を説明します。

キューポイントが読み込まれる前に処理を始めてしまう競合状態（レース コンディション）を防ぐために、キューポイントを扱う前に loadedmetadata イベントがディスパッチされるのを待つ必要があります。適切なテキストトラックを取得したら、oncuechange イベントを利用してキューポイント イベントのディスパッチを監視します。

以下のコードは、キューポイントを監視し、キューポイントから取得したデータを表示する方法を示しています。この例では、動画はプレーヤーに静的にバインドされています。

• 11行目: 動的に生成した HTML を挿入する場所として、p要素を作成します。
• 18行目、30行目: one() メソッドを使用して、loadedmetadata イベントのリスナーを 1回だけ登録します。イベント ハンドラーはここで無名関数として定義されています。
• 19行目: textTracks() メソッドを使用して TextTracks 配列を取得し、キューポイントを保持している 0 番目の要素を変数 tt に代入します。実装によっては、キューポイントが別の配列要素に存在する可能性があります。詳細は後述の 正しいトラックを見つける セクションを参照してください。
• 20行目、28行目: oncuechange イベントがディスパッチされたときのイベント ハンドラーを設定します。
• 21行目: 最初の（配列の 0 番目の要素の）キューポイント ディスパッチを取得していることを確認します。この条件がない場合、各キューポイントに対して 2 回処理が実行されます。継続時間が重なり合うキューポイントを使用している場合は、この条件を変更する必要があります。
• 22〜26行目: キューポイントから取得した情報を使用して HTML を動的に生成し、HTML ページに挿入します。
• 29行目: 動画を再生します。

    <video-js id="myPlayerID"
      data-account="1507807800001"
      data-player="zN3V18ZPEu"
      data-embed="default"
      controls=""
      data-video-id="1507781667001"
      data-playlist-id=""
      data-application-id=""
      width="960" height="540"></video-js>
    
    <p id="insertionPoint"></p>
    
    <script src="https://players.brightcove.net/1507807800001/zN3V18ZPEu_default/index.min.js"></script>
    
    <script>
      videojs.getPlayer('myPlayerID').ready(function() {
        var player = this;
        player.one("loadedmetadata", function () {
          var tt = player.textTracks()[0];
          tt.oncuechange = function () {
            if (tt.activeCues[0] !== undefined) {
              var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
              dynamicHTML += "text: " + tt.activeCues[0].text + ", ";
              dynamicHTML += "startTime: " + tt.activeCues[0].startTime + ",  ";
              dynamicHTML += "endTime: " + tt.activeCues[0].endTime;
              document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/>";
            }
          }
          player.play();
        });
      });
    </script>

Video Cloud キューポイントの処理 - プレーヤーに動画を動的に読み込む場合

このセクションでは、catalog.getVideo() と catalog.load() メソッドを使用して動画をプレーヤーに動的に読み込む場合に、カタログ キューポイントを処理する方法を説明します。

プレーヤー カタログを使用して動画を取得・読み込む場合、静的にバインドされた動画と比べてキューポイントの処理は少し簡単になります。loadedmetadata イベントを使用する必要がないためです。

• 11行目: 動的に生成したHTMLを挿入する場所として、p要素を作成します。
• 17行目、31行目: catalog.getVideo() メソッドを使用して動画を取得します。コールバック関数はここで無名関数として定義されています。
• 19行目: catalog.load() メソッドを使用して動画をプレーヤーに読み込みます。
• 21行目: textTracks() メソッドを使用して TextTracks 配列を取得し、キューポイントを保持している 0 番目の要素を変数 tt に代入します。実装によっては、キューポイントが別の配列要素に存在する可能性があります。詳細は後述の 正しいトラックを見つける セクションを参照してください。
• 22〜30行目: oncuechange イベントがディスパッチされたときのイベント ハンドラーを設定します。
• 23行目: 最初の（配列の 0 番目の要素の）キューポイントが定義されていることを確認します。この条件がない場合、各キューポイントに対して 2 回処理が実行され、2 回目は activecues 配列内に要素が定義されていない状態（2 回目のキューチェンジはキューポイント終了時のため）で実行されます。継続時間が重なり合うキューポイントを使用している場合は、この条件を変更する必要があります。
• 24〜28行目: キューポイントから取得した情報を使用して HTML を動的に生成し、HTML ページに挿入します。
• 32行目: 動画を再生します。

    <video-js id="myPlayerID"
      data-account="1507807800001"
      data-player="zN3V18ZPEu"
      data-embed="default"
      controls=""
      data-video-id=""
      data-playlist-id=""
      data-application-id=""
      width="960" height="540"></video-js>
    
    <p id="insertionPoint"></p>
    
    <script src="https://players.brightcove.net/1507807800001/zN3V18ZPEu_default/index.min.js"></script>
      <script>
      videojs.getPlayer('myPlayerID').ready(function() {
        var player = this;
        player.catalog.getVideo('1507781667001', function (error, video) {
          //deal with error
          player.catalog.load(video);
          player.one("loadedmetadata", function () {
            var tt = player.textTracks()[0];
            tt.oncuechange = function () {
              if (tt.activeCues[0] !== undefined) {
                var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
                dynamicHTML += "text: " + tt.activeCues[0].text + ", ";
                dynamicHTML += "startTime: " + tt.activeCues[0].startTime + ",  ";
                dynamicHTML += "endTime: " + tt.activeCues[0].endTime;
                document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/>";
              }
            }
          });
          player.play();
        });
      });
    </script>

すべての Video Cloud キューポイント情報を取得する

既にお気づきかもしれませんが、すべての Video Cloud キューポイント情報が activecues 配列から直接取得できるわけではありません。これは、mediainfo プロパティから必要な情報を取得することで簡単に解決できます。

このソリューションの基本的なアプローチは次のとおりです:

1. mediainfo プロパティが設定されるよう、loadstart イベントが発生するのを待ちます。
2. mediainfo プロパティから cue_points 配列を取得し、変数に代入します。この変数には、Video Cloud キューポイントの完全な情報が含まれます。
3. キューポイント イベント発生時に、time プロパティの値に基づいて対応するキューポイント データを取得します。これは、配列内のオブジェクトから特定のプロパティ値に一致するオブジェクトを取得するヘルパー関数を使って実行します。
4. 取得したキューポイント データを使用します。

次の画像は、キューポイント配列全体（左上）、単一キューポイントのデータコレクション（右上）、およびその単一キューポイント データコレクション内の 1 つのプロパティ（右下）を示しています。

以下のスニペットでは、前述のサンプルから新たに追加／変更されたコードのみを説明します。

• 452〜463行目: すべてのキューポイント配列から単一のキューポイントデータコレクションを抽出するための関数を定義します。この関数には、すべてのキューポイント配列、検索対象のプロパティ名、そして検索する値を引数として渡します。
• 432行目: loadstart イベントを監視します。動画の読み込みが開始されると、mediainfo プロパティが設定されます。
• 434行目: すべての Video Cloud キューポイント配列を変数に代入します。
• 443行目: キューポイント ディスパッチ イベント ハンドラー内で、特定のキューポイント データコレクションを変数に代入します。ここで、最初の箇条書きで説明した関数が呼び出されます。使用される引数は次のとおりです:
  • cuePointAra: Video Cloud キューポイントの全コレクション
  • 'time': 値を検索する対象プロパティ
  • tt.activeCues[0].startTime: 現在のキューポイント ディスパッチ イベント ハンドラーで処理しているキューポイントの開始時刻
• 444〜445行目: デバッグ用の console.log() メソッド呼び出しです。本番コードでは削除する必要があります。

    <script>
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this,
          cuePointAra = [],
          allCuePointData;
        myPlayer.on('loadstart', function () {
          //console.log('mediainfo', myPlayer.mediainfo);
          cuePointAra = myPlayer.mediainfo.cue_points;
          var tt = myPlayer.textTracks()[0];
          tt.oncuechange = function () {
            if (tt.activeCues[0] !== undefined) {
              var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
              dynamicHTML += "text: " + tt.activeCues[0].text + ", ";
              dynamicHTML += "startTime: " + tt.activeCues[0].startTime + ",  ";
              dynamicHTML += "endTime: " + tt.activeCues[0].endTime;
              document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/>";
              allCuePointData = getSubArray(cuePointAra, 'time', tt.activeCues[0].startTime);
              console.log('cue point data:', allCuePointData);
              console.log('cue point metadata:', allCuePointData[0].metadata);
            }
          }
          myPlayer.play();
          myPlayer.muted(true);
        });
    
        function getSubArray(targetArray, objProperty, value) {
          var i, totalItems = targetArray.length,
            objFound = false,
            idxArr = [];
          for (i = 0; i < totalItems; i++) {
            if (targetArray[i][objProperty] === value) {
              objFound = true;
              idxArr.push(targetArray[i]);
            }
          }
          return idxArr;
        };
      });
    </script>

プログラムによるキューポイントの追加

キューポイントはプログラムから追加することも可能です。重要となるメソッドは HTML5 の VTTCue インターフェースです。以下の構文を使用してキューポイントを作成できます:

      new VTTCue( startTime, endTime, text )

キューポイント処理のロジックは前述の例とほぼ同じであるため、以下では異なる部分のみ詳細に説明します。

• 43行目・44行目: プレーヤーの addRemoteTextTrack() メソッドを使用して textTrack 要素を追加します。kind 属性には metadata を指定し、label にはこの例では Timed Cue Point を指定しています。

• 45〜48行目: プレーヤーの addCue() メソッドを使用して2つのキューポイントを作成する前に、10ミリ秒待ちます。キューポイントは HTML5 の VTTCue() コンストラクタを使用して生成されます。

• 22行目: addtrack イベントを監視します。
• 23行目: プレーヤーに関連付けられているすべてのテキストトラックを取得します。
• 24行目: attLength 変数にテキストトラック数を代入します。
• 25〜30行目: 各テキストトラックをループし、label が一致するトラックを見つけたら変数に代入し、ループを終了します。

      <video-js id="myPlayerID"
        data-video-id="4607746980001"
        data-account="1507807800001"
        data-player="default"
        data-embed="default"
        width="640" height="360"
        controls=""></video-js>
      
      <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
      
      <p id="insertionPoint"></p>
      
      <script type="text/javascript">
        videojs.getPlayer("myPlayerID").ready(function () {
          var myPlayer = this,
            textTrack = [],
            allTextTacks,
            attLength,
            tt;
          myPlayer.one("loadedmetadata", function () {
            myPlayer.textTracks().addEventListener('addtrack', function () {
              allTextTacks = myPlayer.textTracks();
              attLength = allTextTacks.length;
              for (var i = 0; i < attLength; i++) {
                if (allTextTacks[i].label === 'Timed Cue Point') {
                  tt = allTextTacks[i];
                  break;
                }
              }
              tt.oncuechange = function () {
                if (tt.activeCues[0] !== undefined) {
                  var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
                  dynamicHTML += "text: <strong>" + tt.activeCues[0].text + "</strong>, ";
                  dynamicHTML += "startTime: <strong>" + tt.activeCues[0].startTime + "</strong>,  ";
                  dynamicHTML += "endTime: <strong>" + tt.activeCues[0].endTime + "</strong>";
                  document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/><br/>";
                } else {
                  document.getElementById("insertionPoint").innerHTML += "Cue point duration over" + "<br/><br/>";
                }
              }; //end oncuechange
            }); // end playing
      
            textTrack = myPlayer.addRemoteTextTrack({kind: 'metadata', label: 'Timed Cue Point', mode: 'hidden'}, false);
            textTrack.track.mode = 'hidden';
      
            setTimeout(function(){
              textTrack.track.addCue(new window.VTTCue(2, 5, 'cue point 1 text'));
              textTrack.track.addCue(new window.VTTCue(10, 15, 'cue point 2 text'));
            }, 10);
          }); //end on loadedmetadata
        }); //end ready
      </script>

このコードを実行すると、次のスクリーンショットのような出力が生成されます。なお、id の値は VTTCue() コンストラクタ使用時には自動的には設定されません。