以程式設計方式實作提示點

視頻雲提示點

在文檔的此部分中，您將學習設置目錄提示點並偵聽目錄提示點事件調度。

設置視頻雲提示點

可以使用Video Cloud Studio以及其他多種方式將Video Cloud提示點與視頻相關聯，詳細信息請參見本文檔：在媒體模塊中使用提示點。

在視頻雲提示點上行動-視頻靜態綁定到播放器

在本部分中，您將學習將視頻靜態綁定到播放器時處理目錄提示點的情況，這意味著視頻已在Studio中或直接使用Player Management API加載到了播放器中。

為了避免在提示點加載之前嘗試處理提示點的競爭狀況，您需要使用loadedmetadata在處理提示點之前要調度的事件。讀取正確的文本軌道後，請使用oncuechange偵聽提示點事件以調度事件。

以下代碼顯示偵聽提示點並顯示提示點中的數據。請注意，在此示例中，視頻是靜態綁定到播放器的。

• 第 11 行：建立段落元素做為插入動態建立 HTML 的位置。
• 第 18,30 行：使用one()為該事件添加事件偵聽器的方法loadedmetadata事件僅一次。事件處理常式函數是以匿名方式定義的。
• 第 19 行：使用該textTracks()方法擷取 TextTrack 陣列，然後將保留提示點的第零個元素指派給變數tt。請注意，在某些實現中可能提示點可能位於不同的數組元素中。如需詳細資訊，請參閱下方的「尋找正確軌道」一節。
• 第 20,28 行：設定傳送事件時的oncuechange事件處理常式函數。
• 第二十一行：檢查以確保獲得第一個（第零個數組元素）提示點分派。如果沒有這種情況，您將看到每個提示點都會被作用兩次。請注意，如果您使用的是具有重疊持續時間的提示點，則此條件必須不同。
• 第 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>

對視頻雲提示點採取行動-在播放器中動態加載視頻

在本節中，您將學習使用以下命令將視頻動態加載到播放器中時處理目錄提示點的方法。catalog.getVideo()和catalog.load()方法。

使用播放器目錄獲取和加載視頻時，處理提示點要比使用靜態綁定的視頻時要容易一些，因為您無需使用loadedmetadata事件。

• 第 11 行：建立段落元素做為插入動態建立 HTML 的位置。
• 第 17,31 行：使用catalog.getVideo()檢索視頻的方法。回調函數在此處匿名定義。
• 第 19 行：使用catalog.load()將視頻加載到播放器的方法。
• 第二十一行：使用該textTracks()方法擷取 TextTrack 陣列，然後將保留提示點的第零個元素指派給變數tt。請注意，在某些實現中可能提示點可能位於不同的數組元素中。如需詳細資訊，請參閱下方的「尋找正確軌道」一節。
• 第 22-30 行：設定傳送事件時的oncuechange事件處理常式函數。
• 第 23 行：檢查以確保定義了第一個（第零個數組元素）提示點。如果沒有這種條件，您將看到每個提示點都會被執行兩次，第二次在提示中沒有定義元素activecues數組（因為第二個提示更改是針對提示點結束的）。請注意，如果您使用的是具有重疊持續時間的提示點，則此條件必須不同。
• 第 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提示點信息都可以直接從activecues數組。這很容易解決，方法是從mediainfo屬性。

此解決方案的基本方法是：

1. 等待loadstart的活動mediainfo要填充的屬性。
2. 分配cue_points來自的數組mediainfo變量的屬性。此變量包含完整的Video Cloud提示點信息。
3. 在提示點事件中，根據以下事件檢索相應的提示點數據：time適當的價值。這將使用幫助函數來完成，該函數根據對像中的屬性值從數組中獲取對象。
4. 從提示點使用數據。

下圖顯示了整個提示點數組（左上），單個提示點數據集合（右上）以及該單個提示點數據集合的一個屬性（右下）。

在下面的代碼段中，將僅說明上述示例中的新代碼/更改過的代碼。

• 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行：添加一個textTrack使用玩家的addRemoteTextTrack()方法。指定kind成為元數據和label， 在這種情況下定時提示點。

• 45-48行：等待10毫秒，然後使用播放器的提示創建兩個提示點addCue()方法。提示點使用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()構造方法。