Programmgesteuertes Implementieren von Cue-Points

Video Cloud Cue Points

In diesem Abschnitt des Dokuments erfahren Sie, wie Sie Katalog-Cue-Punkte festlegen und auf Ereignis-Dispatches für Katalog-Cue-Punkte warten.

Festlegen von Video Cloud-Cue-Punkten

Video Cloud-Cue-Points können mithilfe von Video Cloud Studio und auf verschiedene andere in diesem Dokument beschriebene Arten mit einem Video verknüpft werden: Arbeiten mit Cue-Points im Medienmodul.

Auf Video Cloud-Cue-Points reagieren - Video statisch an den Player gebunden

In diesem Abschnitt des Dokuments erfahren Sie, wie Sie Katalog-Cue-Points verarbeiten, wenn das Video statisch an den Player gebunden wurde. Dies bedeutet, dass das Video entweder in Studio oder direkt über die Player-Verwaltungs-API in den Player geladen wurde.

Um zu verhindern, dass eine Race-Bedingung versucht, Cue-Punkte zu verarbeiten, bevor sie geladen werden, müssen Sie die verwenden loadedmetadata Ereignis, das vor dem Umgang mit den Cue-Points ausgelöst werden soll. Sobald die richtige Textspur gelesen wurde, verwenden Sie die oncuechange Ereignis zum Abhören von Cue-Points-Ereignissen, die ausgelöst werden sollen.

Der folgende Code zeigt das Abhören von Cue-Punkten und das Anzeigen der Daten vom Cue-Punkt. Beachten Sie, dass in diesem Beispiel das Video statisch an den Player gebunden ist.

• Zeile 11: Erstellen Sie ein Absatzelement als Ort, an dem dynamisch erstelltes HTML injiziert werden soll.
• Zeilen 18,30: Verwenden Sie die one() Methode zum Hinzufügen eines Ereignis-Listeners für die loadedmetadata Veranstaltung nur einmal. Die Event-Handler-Funktion wird hier anonym definiert.
• Zeile 19: Rufen Sie das TextTracks-Array mit der textTracks() Methode ab und weisen Sie dann das Nullloth-Element, das die Cue-Points enthält, der Variablen zu tt. Beachten Sie, dass es in einigen Implementierungen möglicherweise möglich ist, dass sich die Cue-Points in einem anderen Array-Element befinden könnten. Weitere Informationen finden Sie im Abschnitt „Richtige Spur suchen“ unten.
• Zeilen 20,28: Legt die Ereignishandler-Funktion fest, wenn das oncuechangeEreignis ausgelöst wird.
• Zeile 21: Stellen Sie sicher, dass Sie den ersten Cue-Point-Versand (nulltes Array-Element) erhalten. Ohne diese Bedingung würden Sie sehen, dass jeder Cue-Punkt zweimal bearbeitet wird. Beachten Sie, dass diese Bedingung unterschiedlich sein müsste, wenn Sie Cue-Points verwenden, die sich überlappen.
• Zeilen 22-26: Erstellen Sie dynamisch HTML mit Informationen vom Cue-Point und injizieren Sie sie in die HTML-Seite.
• Zeile 29: Spielen Sie das Video ab.

<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>

Aktivieren von Video Cloud-Cue-Points - Laden Sie Videos dynamisch in den Player

In diesem Abschnitt des Dokuments erfahren Sie, wie Sie Katalog-Cue-Points verarbeiten, wenn das Video mithilfe von dynamisch in den Player geladen wird catalog.getVideo() und catalog.load() Methoden.

Wenn Sie den Player-Katalog zum Abrufen und Laden des Videos verwenden, ist die Verarbeitung von Cue-Points etwas einfacher als bei Verwendung eines statisch gebundenen Videos, da Sie das nicht verwenden müssen loadedmetadata Veranstaltung.

• Zeile 11: Erstellen Sie ein Absatzelement als Ort, an dem dynamisch erstelltes HTML injiziert werden soll.
• Zeilen 17,31: Verwenden Sie die catalog.getVideo() Methode zum Abrufen eines Videos. Die Rückruffunktion wird hier anonym definiert.
• Zeile 19: Verwenden Sie die catalog.load() Methode zum Laden des Videos in den Player.
• Zeile 21: Rufen Sie das TextTracks-Array mit der textTracks() Methode ab und weisen Sie dann das Nullloth-Element, das die Cue-Points enthält, der Variablen zu tt. Beachten Sie, dass es in einigen Implementierungen möglicherweise möglich ist, dass sich die Cue-Points in einem anderen Array-Element befinden könnten. Weitere Informationen finden Sie im Abschnitt „Richtige Spur suchen“ unten.
• Zeilen 22-30: Legt die Ereignishandler-Funktion fest, wenn das oncuechangeEreignis ausgelöst wird.
• Zeile 23: Stellen Sie sicher, dass der erste Cue-Punkt (nulltes Array-Element) definiert ist. Ohne diese Bedingung würden Sie sehen, dass jeder Cue-Punkt zweimal bearbeitet wird, das zweite Mal ohne definierte Elemente in der activecues Array (da die zweite Cue-Änderung für das Cue-Point-Ende gilt). Beachten Sie, dass diese Bedingung unterschiedlich sein müsste, wenn Sie Cue-Points verwenden, die sich überlappen.
• Zeilen 24-28: Erstellen Sie dynamisch HTML mit Informationen vom Cue-Point und injizieren Sie sie in die HTML-Seite.
• Zeile 32: Spielen Sie das Video ab.

<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>

Rufen Sie alle Video Cloud-Cue-Point-Informationen ab

Wie Sie vielleicht bemerkt haben, stehen Ihnen nicht alle Informationen zum Video Cloud-Cue-Point direkt über das zur Verfügung activecues Array. Dies lässt sich leicht beheben, indem Sie die gewünschten Informationen aus dem Internet abrufen mediainfo Eigentum.

Der grundlegende Ansatz dieser Lösung lautet:

1. Warten Sie auf die loadstart Veranstaltung für die mediainfo zu besiedelnde Eigenschaft.
2. Weisen Sie die zu cue_points Array aus dem mediainfo Eigenschaft zu einer Variablen. Diese Variable enthält vollständige Informationen zum Video Cloud-Cue-Point.
3. Rufen Sie bei einem Cue-Point-Ereignis die entsprechenden Cue-Point-Daten basierend auf dem ab time Eigentumswert. Dies erfolgt mithilfe einer Hilfsfunktion, die ein Objekt basierend auf einem Eigenschaftswert im Objekt aus einem Array herausholt.
4. Verwenden Sie die Daten vom Cue-Point.

Das folgende Bild zeigt das gesamte Cue-Point-Array (oben links), die einzelne Cue-Point-Datenerfassung (oben rechts) und eine Eigenschaft aus dieser einzelnen Cue-Point-Datenerfassung (unten rechts).

Im folgenden Snippet wird nur der neue / geänderte Code aus den obigen Beispielen erläutert.

• Zeilen 452-463: Fügen Sie die Funktion hinzu, mit der eine einzelne Cue-Point-Datenerfassung aus dem Array aller Cue-Points extrahiert wird. Beachten Sie, dass Sie das Array aller Cue-Points, die Eigenschaft, in der Sie nach einem bestimmten Wert suchen, und zuletzt den Wert, nach dem Sie suchen, übergeben.
• Zeile 432: Hört auf die loadstart Veranstaltung. Wenn Ihr Video geladen wird, wird die mediainfo Eigenschaft ist ausgefüllt.
• Zeile 434: Weisen Sie das Array aller Video Cloud-Cue-Points einer Variablen zu.
• Zeile 443: Weisen Sie im Cue-Point-Dispatch-Ereignishandler die Datenerfassung des jeweiligen Cue-Points einer Variablen zu. Hier wird die im ersten Aufzählungspunkt erwähnte Funktion aufgerufen. Die verwendeten Argumente sind:
  • cuePointAra: Die gesamte Sammlung von Video Cloud-Cue-Points.
  • 'time': Die Eigenschaft, in der nach einem Wert gesucht werden soll.
  • tt.activeCues[0].startTime: Die Startzeit des Cue-Points, der derzeit im Cue-Point-Dispatch-Event-Handler verarbeitet wird.
• Zeilen 444-445: Debuggen console.log() Methodenaufrufe, die im Produktionscode entfernt werden sollten.

<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>

Programmatische Cue-Points

Es ist möglich, programmgesteuert Cue-Points hinzuzufügen. Die Schlüsselmethode stammt aus HTML5 VTTCue Schnittstelle. Sie können Cue-Points mit der folgenden Syntax erstellen:

new VTTCue( startTime, endTime, text )

Die Logik der Verarbeitung der Cue-Points ist den vorherigen Beispielen sehr ähnlich, sodass nur der Code aufgeführt wird, der sich von dem oben verwendeten unterscheidet.

• Zeilen 43,44: Fügt a hinzu textTrack Element für den Spieler mit dem Spieler addRemoteTextTrack() Methode. Präzisiere das kind sein Metadaten , und ein label , in diesem Fall Zeitgesteuerter Cue-Point.

• Zeilen 45-48: Warten Sie 10 Millisekunden, bevor Sie mit dem Player zwei Cue-Points erstellen addCue() Methode. Die Cue-Points werden mithilfe von HTML5 instanziiert VTTCue() Konstrukteur.

• Zeile 22: Hört auf die addtrack Veranstaltung.
• Zeile 23: Ruft alle dem Player zugeordneten Textspuren ab.
• Zeile 24: Legt die attLength variabel zur Anzahl der Textspuren. Dieser Wert wird in einer Schleife im nächsten Codesegment verwendet.
• Zeilen 25-30: Durchlaufen Sie jede Textspur und prüfen Sie, ob die label gleich dem richtigen Wert sein. Wenn gefunden, weisen Sie die aktuelle Textspur einer Variablen zu und brechen Sie aus der Schleife aus.

<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>

Der Code generiert die Ausgabe wie im folgenden Screenshot gezeigt. Beachten Sie das Ich würde Bei Verwendung von wird kein Wert angegeben VTTCue() Konstruktormethode.