サポートに連絡する| システムステータス
ページコンテンツ

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

    In this topic, you will gain an understanding of cue points with Brightcove Player. You will then see how to programmatically create cue points and handle when a cue point is dispatched.

    概要

    ビデオにキューポイントを設定できます。ビデオの再生中に、各キューポイントがヒットしたときにイベントが送出されます。

    次のビデオを再生して、プレロール、ミッドロール(5 秒、10 秒、12 秒)、およびポストロール時間でプレーヤーの表示キューポイント情報を表示します。

     

    ******** キューポイント情報 ********

     

    ****** 終了キューポイント情報 ******

    このビデオを再生すると、プレーヤーの下に表示される4つのキューポイントの情報が表示されます。

     

     

    主要な概念

    Brightcove Player でキューポイントを効果的に使用するには、いくつかの概念を理解する必要があります。これらの概念については、このマニュアルのこのセクションで説明します。 Brightcove Player でキューポイントを効果的に使用するには、次の概念を理解する必要があります。

    ビデオクラウドカタログキューポイント

    理解すべき最初の概念は、用語とする必要があります。Brightcove Player では、キューポイントは HTML 標準に従ってテキストトラックエレメントとして格納されます。つまり、Video Cloud ビデオを使用すると、「Video Cloud スタイル」のキューポイントはテキストトラックに変換されます。

    これらの「Video Cloud スタイル」キューポイントは、Video Cloud カタログから読み込まれるため、「カタログ」キューポイントとも呼ばれます(カタログの詳細については、 Player カタログドキュメントを参照してください)。この変換が行われると、タイプやキューポイント時間など、カタログキューポイント内の情報の一部がテキストトラックに変換されます。

    カタログキューポイントの構造

    次に理解しておく必要のある概念は、カタログキューポイントと HTML 標準の構造には大きな違いがあるということです。違いは、HTML キューポイントにデュレーションを設定できることです。つまり、すべてのキューポイントについて、2 つのキューポイント変更イベントが送出されます。1 つはキューポイントの先頭に、もう 1 つはキューポイントの最後に送出されます。

    変換プロセスでは、すべてのカタログキューポイントは、開始時間と終了時間が同じキューポイントに変換されます。つまり、カタログキューポイントごとに 2 つのキューポイントイベントが送出され、コードで考慮する必要があります。

    activecuesアレイ

    もう一つHTMLキューポイントを扱うときに理解すべき重要な概念的なポイントは、activeCues配列です。すべてのキューポイントは配列で定義されます。別の配列があります。これはactiveCues、「アクティブ」であるキューポイントを保持しています。これは、再生時間がキューポイントの開始時間と停止時間の間にあることを意味します。

    カタログキューポイントを使用する場合、開始時間と終了時間は同じであるため、2 番目に定義されたキューポイントに対してのみアクティブになります。また、カタログキューポイントでは、2つのキューポイントが重ならないため、同時にアクティブになる可能性はほとんどありません。

    キューポイントタイプ

    このドキュメントでは、typeプロパティに値が割り当てられているキューポイントが表示されます。これらのタイプ値は、Studioユーザーインターフェイスでキューポイントを作成するときに割り当てられます。キューポイントには 2 種類ありますが、typeどちらもプロパティに文字列値を指定するだけです。適切な値は、キューポイント情報の処理中にカスタム JavaScript で使用される場合にのみ役立ちます。タイプについて詳しく説明します。

    • Ad - ADtypeの文字列値をプロパティに割り当てます
    • コード - CODEtypeの文字列値をプロパティに割り当てます

    ビデオクラウドキューポイント

    この項では、カタログキューポイントを設定し、カタログキューポイントイベントのディスパッチをリッスンする方法について学習します。

    ビデオクラウドキューポイントの設定

    Video Cloud キューポイントは、Video Cloud Studio を使用してビデオに関連付けることができます。また、このマニュアルで詳しく説明されているさまざまな方法もあります。メディアモジュールでのキューポイントの操作

    Video Cloud キューポイントでの操作-プレーヤーに静的にバインドされたビデオ

    このドキュメントのこのセクションでは、ビデオがプレーヤーに静的にバインドされている場合、カタログキューポイントを処理する方法を学びます。つまり、ビデオが Studio または Player Management API を直接使用してプレーヤーにロードされたことを意味します。

    キューポイントを読み込む前に処理しようとする競合状態を防ぐには、loadedmetadataキューポイントを処理する前に送出するイベントを使用する必要があります。適切なテキストトラックが読み込まれたら、oncuechangeそのイベントを使用して、送出されるキューポイントイベントをリッスンします。

    次のコードは、キューポイントをリッスンし、キューポイントからのデータを表示する方法を示しています。この例では、ビデオは Player に静的にバインドされています。

    • 24行目:動的に作成された HTML を挿入する場所として、段落要素を作成します。
    • 31,43 行:one()メソッドを使用して、イベントのイベントリスナーを 1 回だけ追加します。loadedmetadata イベントハンドラ関数は、ここで匿名で定義されています。
    • 32行目です:textTracks()メソッドを使用して TextTracks 配列を取得し、キューポイントを保持する 0 tt番目の要素を変数に代入します。いくつかの実装では、キューポイントが別の配列要素にある可能性があることに注意してください。詳細については、以下の「正しいトラックを探す」のセクションを参照してください。
    • 33,41行目:oncuechangeイベントが送出されるときのイベントハンドラ関数を設定します。
    • 34行目です:最初の (0 番目の配列要素) キューポイントのディスパッチを取得していることを確認します。この条件がなければ、各キューポイントが 2 回作用することがわかります。デュレーションが重なるキューポイントを使用している場合は、この条件が異なる必要があることに注意してください。
    • 35~39行目:キューポイントからの情報を使用して HTML を動的に作成し、HTML ページに挿入します。
    • 42行目:ビデオを再生します。
    <video-js id="myPlayerID"
    data-account="1507807800001"
    data-player="6aac508a-741e-41a2-bc7a-5805644cf089"
    data-embed="default"
    data-video-id="1507781667001"
    class="video-js" controls></video-js>
    
    <p id="insertionPoint"></p>
    <script src="https://players.brightcove.net/1507807800001/6aac508a-741e-41a2-bc7a-5805644cf089_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イベントを使用する必要がないので、静的にバインドされたビデオを使用する場合よりもキューポイントの処理が少し簡単です。

    • 76号線:動的に作成された HTML を挿入する場所として、段落要素を作成します。
    • 83,97行目は次のとおりです。catalog.getVideo()メソッドを使用して、ビデオを取得します。コールバック関数は、ここで匿名で定義されています。
    • 85行目線:catalog.load()メソッドを使用して、ビデオをプレーヤーにロードします。
    • 86行目線:textTracks()メソッドを使用して TextTracks 配列を取得し、キューポイントを保持する 0 番目の要素を変数に割り当てますtt。いくつかの実装では、キューポイントが別の配列要素にある可能性があることに注意してください。詳細については、以下の「正しいトラックを探す」セクションを参照してください。
    • 87,95行目は次のとおりです。oncuechangeイベントが送出されるときのイベントハンドラ関数を設定します。
    • 88行目線:最初の (0 番目の配列要素) キューポイントが定義されていることを確認します。この条件がないと、各キューポイントが 2 回作用し、2 activecues回目は配列にエレメントが定義されていないことがわかります (2 番目のキューの変更はキューポイントエンドに対するため)。デュレーションが重複するキューポイントを使用している場合、この条件は異なっていなければならないことに注意してください。
    • 89~93行目は次のとおりです。キューポイントからの情報を使用して HTML を動的に作成し、HTML ページに注入します。
    • 96号線:ビデオを再生します。
    <video-js id="myPlayerID"
      data-account="1507807800001"
      data-player="3c59134e-89e8-4864-87e2-3cc871f8c361"
      data-embed="default"
      data-video-id=""
      class="video-js" controls></video-js>
    
      <p id="insertionPoint"></p>
    
      <script src="https://players.brightcove.net/1507807800001/3c59134e-89e8-4864-87e2-3cc871f8c361_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. loadstartmediainfoプロパティが入力されるまでイベントを待つ。
    2. cue_pointsmediainfoプロパティから変数に配列を割り当てます。この変数には、完全な Video Cloud キューポイント情報が含まれます。
    3. キューポイントイベントで、timeプロパティ値に基づいて対応するキューポイントデータを取得します。これは、オブジェクトのプロパティ値に基づいて配列からオブジェクトを取り出すヘルパー関数を使用して行われます。
    4. キューポイントのデータを使用します。

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

    cue point data

    以下のスニペットでは、上記の例の新しい/変更されたコードのみを説明します。

    • 452-463号線:すべてのキューポイントの配列から 1 つのキューポイントデータ収集を抽出するために使用される関数を含めます。すべてのキューポイントの配列、特定の値を検索するプロパティ、最後に検索する値を渡します。
    • 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 標準キューポイント

    HTML5 標準キューポイントは、所定の形式でトラックエレメントとして格納されます。良い入門コンテンツは、次の HTML5 Rocks チュートリアルで見つけることができます。トラック要素の使用を開始する。ドキュメントのこのセクションでは、WebVTT キューポイントファイルの形式と、それらのキューポイントの処理方法を学習します。

    キューポイントの WebVTT ファイルフォーマット

    WebVTT ファイル形式は厳密に定義されます。キューポイントの場合、ファイルは次のように構成されます。

    • 文字列WebVTTファイルの最初の行として
    • 1 つの空白行
    • 特定のキューポイントの識別子
    • 00:00:00 .000 —> 00:00:00 .000 の形式で継続します。これは時:分:秒.ミリ秒の形式で、厳密に解析されます。数値は必要に応じてゼロに埋め込まなければなりません。
    • 次の空白行までのデュレーションに続く文字はテキスト値に入ります。ここでは複数の異なる値を格納する場合は、JSONは簡単に解析できます
    • 1 つの空白行
    • 識別子/期間/テキスト/空白行の形式を使用して、複数のキューポイントを追加できます

    以下は、2つのキューポイントを定義する有効なWebVTTキューポイントドキュメントです。1つは2〜5秒の期間で、もう1つは10〜15秒の期間です。

    WEBVTT
    
    multiCell
    00:00:02.000 --> 00:00:05.000
    {
    "title": "Multi-celled organisms",
    "description": "Multi-celled organisms have different types of cells that perform specialized functions.",
    "src": "multiCell.jpg",
    "href": "http://en.wikipedia.org/wiki/Multicellular"
    }
    
    insects
    00:00:10.000 --> 00:00:15.000
    {
    "title": "Insects",
    "description": "Insects are the most diverse group of animals on the planet with estimates for the total number of current species range from two million to 50 million. The first insects appeared around 400 million years ago, identifiable by a hard exoskeleton, three-part body, six legs, compound eyes and antennae.",
    "src": "insects.jpg",
    "href": "http://en.wikipedia.org/wiki/Insects"
    }

    次のビデオを再生すると、上記のキューポイント WebVTT ファイルが処理されたことがわかります。キューポイントの先頭に、動的に作成された HTML がページに注入され、その後にテキストフィールドから解析された JSON が表示されます。キューポイントの最後に、「キューポイントデュレーションオーバー」というメッセージが表示されます。

    ******** キューポイント情報 ********

     

    ****** 終了キューポイント情報******

    プロセスキューポイントの概要

    HTML5 標準キューポイントを使用する基本的な手順は次のとおりです。

    1. <track>タグの子としてネストされたタグを使用して、キューポイントを含む WebVTT ファイルを読み込みます。<video-js>
    2. loadedmetadataイベントハンドラで、適切なテキストトラック要素を取得します。
    3. 同じイベントハンドラで、oncuechangeキューポイントイベントの 2 番目のイベントハンドラを設定します。
    4. の中にoncuechangeイベントハンドラー、activecues配列オブジェクトにはゼロ番目の要素が定義されています。はいの場合、キューポイントの開始に作用します。
    5. の中にoncuechangeイベントハンドラー、activecues配列オブジェクトには0番目の要素が定義されており、定義されていない場合は、キューポイントストップに作用します。

    キューポイントコードを処理する

     

    • 122号線:<track>タグを使用して WebVTT ファイルを読み込んで、テキストトラックを作成します。
    • 126行目:動的に作成された HTML を挿入する場所として、段落要素を作成します。
    • 134,152号線:one()メソッドを使用して、loadedmetadataイベントを 1 回だけリッスンします。イベントハンドラ関数は、ここでは匿名で定義されています。
    • 135行目:変数に、最後にロードされたテキストトラックのインデックスを割り当てます。
    • 136行目:前の手順で決定したインデックスを使用して、textTracks()配列の最後の要素を変数に割り当てるメソッドを使用して TextTracks 配列を取得します。このロジックのバリエーションについては、以下の「正しいトラックを検索」セクションを参照してください。
    • 137,149号線:oncuechangeイベントが送出されるときのイベントハンドラ関数を設定します。
    • 138号線:最初の (ゼロ番目の配列要素) のキューポイントが ActiveCues 配列で定義されていることを確認します。これは、これが開始キューポイントイベントであることを示します。
    • 139~145行目:キューポイントからの情報を使用して HTML を動的に作成し、HTML ページに注入します。これには、JSON の解析と、その JSON のさまざまなフィールドの表示が含まれます。
    • 146-147行目:キューポイントの終点に到達したことを示すメモを表示します。
    • 150行目線:ビデオを再生します。
    <video-js id="myPlayerID2"
      data-account="1752604059001"
      data-player="8cfb6785-c4be-43b4-af68-7ca2fe3a6ebf"
      data-embed="default"
      data-video-id="3851380732001"
      class="video-js" controls>
    
      <track kind="metadata" src="https://solutions.brightcove.com/bcls/tests/player/cuepoints.vtt" />
    </video-js>
    
    <p id="insertionPoint2"></p>
    
    <script src="https://players.brightcove.net/1752604059001/8cfb6785-c4be-43b4-af68-7ca2fe3a6ebf_default/index.min.js"></script>
    
    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        myPlayer.one("loadedmetadata", function () {
          var trackIndex = myPlayer.textTracks().length - 1;
          var tt = myPlayer.textTracks()[trackIndex];
          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("insertionPoint2").innerHTML += dynamicHTML + "<br/><br/>";
              jsonData = JSON.parse(tt.activeCues[0].text);
              document.getElementById("insertionPoint2").innerHTML += jsonData.title + ": " + jsonData.description + "<br/><br/>";
            } else {
              document.getElementById("insertionPoint2").innerHTML += "Cue point duration over" + "<br/><br/>";
            }
          } //end oncuechange
          myPlayer.play();
          myPlayer.muted(true);
        }); //end loadedmetadata
      }); //end ready
    </script>

    キューポイントコードを処理する

     

    • 270号線:<track>タグを使用して WebVTT ファイルを読み込んで、テキストトラックを作成します。
    • 273行目:動的に作成された HTML を挿入する場所として、段落要素を作成します。
    • 285,309行目:one()メソッドを使用して、loadedmetadataイベントを一度だけリッスンします。イベントハンドラ関数は、ここでは匿名で定義されています。
    • 286号線:最後にロードされたテキストトラックのインデックスを変数に割り当てます。
    • 287号線:前の手順で決定したインデックスを使用して、textTracks()配列の最後の要素を変数に割り当てるメソッドを使用して TextTracks 配列を取得します。このロジックのバリエーションについては、以下の「正しいトラックを探す」セクションを参照してください。
    • 289,301行目:oncuechangeイベントが送出されるときのイベントハンドラ関数を設定します。
    • 290号線:ActiveCues 配列で最初の (0 番目の配列要素) キューポイントが定義されていることを確認します。これは、開始キューポイントイベントであることを示します。
    • 291~294行目:キューポイントからの情報を使用して HTML を動的に作成し、HTML ページに注入します。これには、JSON の解析と JSON のさまざまなフィールドの表示が含まれます。
    • 295-297行目:キューポイントの終端に達したノートを表示します。
    • 302行目:ビデオを再生します。

     

    addRemoteTextTrack()メソッドを使用してプログラムでWebVTTファイルを追加できると仮定できます。この場合、キューポイントを使用する前にキューポイントを処理する準備ができていない競合状態が発生するため、信頼性は低くなります。図のように、<track>タグを使用して WebVTT ファイルを追加することは安全です。

    正しいトラックを探す

    この文書では、プレーヤーに複数のテキストトラックが関連付けられていると、問題が発生する可能性があります。プレイヤに関連付けられているテキストトラックは 1 つのみであると仮定され、このコードが使用されました: var tt = myPlayer.textTracks()[0]; .0 番目の配列要素を選択すると、プレーヤーに関連付けられた単一のテキストトラックと見なされます。

    テキストトラックはキューポイントだけでなく、他の種類のデータにも使用されます。種類属性には、次の値を含めることができます。

    • 字幕
    • キャプション
    • 説明
    • メタデータ

    つまり、プレーヤーに複数のテキストトラックを関連付けることができ、アプリケーションロジックに適したトラックを見つける方法が必要です。次のコードは、メタデータ (キューポイント) の値が見つかるまで、使用可能なテキストトラックをループします。

    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this,
          allTextTacks,
          attLength,
          tt;
        myPlayer.one("loadedmetadata", function () {
          allTextTacks = myPlayer.textTracks();
          attLength = allTextTacks.length;
          for (var i = 0; i < attLength; i++) {
            if (allTextTacks[i].kind === 'metadata') {
              tt = allTextTacks[i];
              break;
            };
          };
        });
      });
    </script>

    前の例のロジックを使用して、tt目的のテキストトラックを含む変数を使用してキューポイントを処理できます。

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

    プログラムによってキューポイントを追加することは可能です。キーメソッドは、VTTCue HTML5インターフェイスから来ています。キューポイントを作成するには、次の構文を使用します。

    new VTTCue( startTime, endTime, text )

    キューポイントを処理するロジックは、前の例と非常によく似ているため、上記で使用されたコードとは異なるコードのみが詳しく説明されます。

    • 43,44行目は次のとおりです。追加しますtextTrackプレイヤーの要素を使用するプレイヤーへの要素addRemoteTextTrack()方法。指定しますkindすることがメタデータ、およびlabel、 この場合時限キューポイント

    • 45〜48行目:10 ミリ秒待ってから、addCue()プレイヤーのメソッドを使用して 2 つのキューポイントを作成します。キューポイントは、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"
      class="video-js"
      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()コンストラクターメソッド。

    dynamic cue points

    ID3とメディアキューポイント

    ID3 キューポイントまたはメディアキューポイントがメディアに関連付けられている場合は、id3CuePointsTrack()mediaCuePointsTrack()およびメソッドを使用して処理できます。たとえば、キューポイントの変更を聞くには、以下を使用します。

    videojs.getPlayer('myPlayerID').ready(function () {
      var myPlayer = this;
      myPlayer.one("canplay", function () {
        myPlayer.id3CuePointsTrack().on('cuechange', function () {
          // process cue point here
        });
      });
    });

    ID3 の詳細

    ID3 キューポイントの使用に関する詳しい情報を以下に示します。

    • ID3 タグを使用して、時間指定メタデータをストリームに挿入できます。
    • セグメントごとに複数の ID3 フレームを設定できます。
    • id3CuePointsTrack()前述の方法を使用して、Brightcove Player は ID3 キューポイントを解析し、それらをテキストトラックとして公開します。
    • canplayイベントを待つのは、ベストプラクティスです。または、アクセスしようとしたときにトラックが取得できない可能性があります。
    • タグごとに複数のフレームがサポートされています。

    既知の問題

    • Safari では、終了時間が開始時間と等しい場合、キューポイントはトリガーされません。したがって、Safariの互換性が問題になる場合、キューポイントにはゼロより大きい期間が必要です。

    ページの最終更新日30 Sep 2021