サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

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

    このトピックでは、次のようなキューポイントについて理解しています。 Brightcove Player。 プログラムでキューポイントを作成し、キューポイントが送出されたときに処理する方法がわかります。

    概要

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

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

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

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

    このビデオを再生すると、下に表示されるXNUMXつのキューポイントの情報が表示されます player.

    主なコンセプト

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

    Video Cloud カタログキューポ​​イント

    理解する最初の概念は用語と関係しています。 に Brightcove PlayerキューポイントはHTML標準に従ってテキストトラック要素として格納されます。 これは、 Video Cloud ビデオが使用されている場合、Video Cloud スタイル "キューポイントはテキストトラックに変換されます。

    これらの "Video Cloud 「スタイル」キューポイントは「カタログ」キューポイントと呼ばれることもあります。 Video Cloud カタログ( Player カタログ カタログに関する詳細は文書を参照)。 この変換が行われると、カタログキューポ​​イントの情報(タイプとキューポイントタイムなど)の一部がテキストトラックに変換されます。

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

    次のコンセプトは、構造内のカタログキューポ​​イントとHTML標準の間に大きな違いがあることです。 違いは、HTMLキューポイントに継続時間があることです。 これは、キューポイントごとに、キューポイントの開始時とキューポイントの終了時の2つのキューポイント変更イベントが送出されることを意味します。

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

    activecues 配列

    別のAn HTMLキューポイントを扱うときに理解する重要な概念的なポイントは、 activeCues アレイ。 すべてのキューポイントは配列で定義されます。 別の配列がありますが、 activeCuesキューポイントの開始時間と終了時間の間にあることを意味する "アクティブ"であるキューポイントを保持します。

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

    キューポイントタイプ

    このドキュメントでは、 type プロパティに値が割り当てられました。 これらのタイプ値は、キューポイントを作成するときに割り当てられます Studio ユーザーインターフェース。 キューポイントにはXNUMXつのタイプがありますが、どちらも単に文字列値を type プロパティ。 適切な値は、カスタムJavaScriptでキューポイント情報を処理している場合にのみ役立ちます。 タイプは以下の通りです:

    • Ad - の文字列値を割り当てます。 AD type 財産
    • コード - の文字列値を割り当てます。 CODE type 財産

    Video Cloud キューポイント

    このドキュメントのこのセクションでは、カタログキューポ​​イントを設定し、カタログキューポ​​イントイベントディスパッチをリッスンする方法を学習します。

    設定 Video Cloud キューポイント

    Video Cloud キューポイントは、 Video Cloud Studio、およびこのドキュメントで詳しく説明する他の多くの方法: メディアモジュールのキューポイントの操作.

    行動する Video Cloud キューポイント-に静的にバインドされたビデオ player

    ドキュメントのこのセクションでは、ビデオが静的にバインドされている場合にカタログキューポ​​イントを処理する方法を学びます player、つまり、ビデオが player どちらかに Studio または Player Management API 直接。

    キューポイントがロードされる前にキューポイントを処理しようとする競合状態を回避するには、キューポイントを使用する必要があります。 loadedmetadata キューポイントを処理する前に送出されるイベント。 適切なテキストトラックが読み取られたら、 oncuechange ディスパッチされるキューポイントイベントを待機するイベント。

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

    • Line 24:動的に作成されたHTMLを挿入する場所として段落要素を作成します。
    • 31,43、XNUMX行目: one() のイベントリスナーを追加するメソッド loadedmetadata イベントは1回だけです。 イベントハンドラ関数は、ここでは匿名で定義されています。
    • Line 32:を使用してTextTracks配列を取得する textTracks() メソッドに渡し、キューポイントを保持する0番目の要素を変数に代入します tt。 いくつかの実装では、キューポイントが異なる配列要素内に存在する可能性があることに注意してください。 を参照してください 正しいトラックを見つける 詳細は以下のセクションを参照してください。
    • 33,41行:イベントハンドラ関数を設定します。 oncuechangeイベントが送出されます。
    • Line 34:最初の(0番目の配列要素)キューポイントのディスパッチを取得していることを確認します。 この状態がなければ、各キューポイントが2回動作することがわかります。 オーバーラップする継続時間を持つキューポイントを使用している場合は、この条件が異なる必要があります。
    • 35-39:キューポイントからの情報を使用してHTMLを動的に作成し、HTMLページに挿入します。
    • Line 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 キューポイント-ビデオを動的にロードします player

    ドキュメントのこのセクションでは、動画が動的に読み込まれたときにカタログのキューポイントを処理する方法を学びます player catalog.getVideo()catalog.load() 方法。

    あなたが使用している場合 player ビデオを取得してロードするためのカタログ、キューポイントの処理は、静的にバインドされたビデオを使用する場合よりも少し簡単です。 loadedmetadata イベント。

    • Line 76:動的に作成されたHTMLを挿入する場所として段落要素を作成します。
    • 83,97、XNUMX行目: catalog.getVideo() メソッドを使用してビデオを取得します。 ここでコールバック関数は匿名で定義されています。
    • ライン85: catalog.load() ビデオをにロードするメソッド player.
    • Line 86:を使用してTextTracks配列を取得する textTracks() メソッドに渡し、キューポイントを保持する0番目の要素を変数に代入します tt。 いくつかの実装では、キューポイントが異なる配列要素内に存在する可能性があることに注意してください。 を参照してください 正しいトラックを見つける 詳細は以下のセクションを参照してください。
    • 87,95行:イベントハンドラ関数を設定します。 oncuechangeイベントが送出されます。
    • Line 88:最初の(第0番目の配列要素)キューポイントが定義されていることを確認します。 この状態がなければ、各キューポイントは2回、2回目は activecues 配列(2番目のキューの変更はキューポイントの終了のためです)。 オーバーラップする継続時間を持つキューポイントを使用している場合は、この条件が異なる必要があります。
    • 89-93:キューポイントからの情報を使用してHTMLを動的に作成し、HTMLページに挿入します。
    • Line 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. を待つ loadstart イベント mediainfo ポピュレートされるプロパティ。
    2. 割り当て cue_points 配列から mediainfo プロパティを変数に追加します。 この変数には完全な Video Cloud キューポイント情報。
    3. キューポイントイベントでは、キューポイントイベントに基づいて対応するキューポイントデータを取得します。 time プロパティ値。 これは、オブジェクト内のプロパティ値に基づいて配列からオブジェクトを取得するヘルパー関数を使用して行われます。
    4. キューポイントのデータを使用します。

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

    キューポイントデータ

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

    • 452-463:すべてのキューポイントの配列から単一のキューポイントデータコレクションを抽出するために使用する関数をインクルードします。 すべてのキューポイントの配列、特定の値を検索するプロパティ、最後に検索する値を渡すことに注意してください。
    • ライン432: loadstart イベント。 動画の読み込みが開始されると、 mediainfo プロパティが設定されます。
    • Line 434:すべての配列を割り当てる Video Cloud キューは変数を指します。
    • Line 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 ファイルの最初の行として
    • 単一の空白行
    • 特定のキューポイントの識別子
    • フォームの期間 00:00:00.000 --> 00:00:00.000; これは時:分:秒です。ミリ秒の形式で、厳密に解析されます。 必要に応じて数字にゼロを埋め込む必要があります
    • 次の空白行までの継続時間に続く文字は、 テキスト 値; ここで複数の異なる値を保存したい場合は、JSONは簡単に解析できます
    • 単一の空白行
    • 識別子/継続時間/テキスト/空白行形式を使用して、複数のキューポイントを追加できます

    次の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がページに挿入され、その後に テキスト フィールド。 キューポイントの最後にメッセージ キューポイントの継続時間 表示されています。

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

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

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

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

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

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

    • Line 122:WebVTTファイルを読み込み、テキストトラックを作成します。 <track> タグ。
    • Line 126:動的に作成されたHTMLを挿入する場所として段落要素を作成します。
    • 134,152、XNUMX行目: one() メソッドを一度だけ聞く loadedmetadata イベント。 イベントハンドラ関数は、ここでは匿名で定義されています。
    • Line 135:ロードされた最後のテキストトラックのインデックスを変数に代入します。
    • Line 136:を使用してtextTracks配列を取得する textTracks() メソッド前の手順で決定したインデックスを使用して、配列の最後の要素を変数に代入します。 を参照してください 正しいトラックを見つける このロジックのバリエーションについては以下のセクションを参照してください。
    • 137,149行:イベントハンドラ関数を設定します。 oncuechangeイベントが送出されます。
    • Line 138:最初の(第0番目の配列要素)キューポイントがactiveCues配列に定義されていることを確認します。 これは、これが開始キューポイントイベントであることを示しています。
    • 139-145:キューポイントからの情報を使用してHTMLを動的に作成し、HTMLページに挿入します。 これには、JSONの解析とそのJSONのさまざまなフィールドの表示が含まれます。
    • 線146-147:キューポイントの終わりに達したというメモを表示します。
    • Line 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>

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

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

    WebVTTファイルをプログラムで追加することができます。 addRemoteTextTrack() 方法。 この場合、キューポイントを使用しようとする前に処理する準備ができていない競合状態が発生する可能性があるため、信頼性がありません。 WebVTTファイルを追加することは安全です。 <track> タグを表示します。

    正しいトラックを見つける

    このドキュメントの多くの場所で、複数のテキストトラックが関連付けられている場合、問題が発生する可能性があります。 player。 XNUMXつのテキストトラックのみが player したがって、このコードが使用されました: var tt = myPlayer.textTracks()[0];。 XNUMX番目の配列要素を選択すると、XNUMXつのテキストトラックが player.

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

    • サブタイトル
    • キャプション
    • 説明
    • メタデータ

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

    <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 変数には、必要なテキストトラックが含まれています。

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

    プログラムでキューポイントを追加することは可能です。 重要な方法は、HTML5 VTTCue インタフェース。 キューポイントを作成するには、次の構文を使用します。

    new VTTCue( startTime, endTime, text )

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

    • ライン43,44: textTrack 要素を player player's addRemoteTextTrack() 方法。 指定する kind ようにするには メタデータ、と label、 この場合 タイミングキューポ​​イント.

    • 45〜48行目:10ミリ秒待ってから、 player's addCue() 方法。 キューポイントは、HTML5を使用してインスタンス化されます。 VTTCue() コンストラクタ。

    • ライン22: addtrack イベント。
    • 23行目:に関連付けられているすべてのテキストトラックを取得します。 player.
    • ライン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() コンストラクタメソッド。

    動的キューポイント

    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フレームを含めることができます。
    • Brightcove Player 上記を使用して、ID3キューポイントを解析し、それらをテキストトラックとして公開します。 id3CuePointsTrack() 方法。
    • を待つのがベストプラクティスです canplay イベントまたはトラックにアクセスしようとしたときにトラックを取得できない可能性があります。
    • タグごとに複数のフレームがサポートされています。

    既知の問題点

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

    ページの最終更新日:28年2020月XNUMX日