Beispiel für Brightcove Spieler: Transcript herunterladen

In diesem Thema erfahren Sie, wie Sie die WebVTT-Datei mit Untertiteln verwenden und in ein herunterladbares Transkript konvertieren.

Beispiel eines Spielers

Das Video im folgenden CodePen verwendet die folgende WebVTT-Datei, um Untertitel zu definieren:

WEBVTT

00:00.000 --> 00:05.000 align:middle line:90%
The waves rhythmically pound against the rocks.

00:05.000 --> 00:10.000 align:middle line:84%
Here in the quaint village of Yachats on the central Oregon coast.

00:10.000 --> 00:15.000 align:middle line:84%
Come visit and enjoy the surf and sand.

00:15.000 --> 00:19.000 align:middle line:84%
Remember, it never rains on the Oregon coast!

Die Probe liefert a Transkript herunterladen Schaltfläche in der Steuerleiste, die eine Textdatei herunterlädt, bei der die WebVTT-Formatierung aus der Datei entfernt wurde. Im Wesentlichen erlaubt es dem Benutzer, ein Transkript der Beschriftungen basierend auf einer geänderten Version der WebVTT-Datei herunterzuladen.

Siehe das Stift-Download-Transcript von Brightcove Learning Services (@rcrooks1969) auf CodePen.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

CodePen verwenden

Hier sind einige Tipps zur effektiven Verwendung des obigen CodePen:

  • Schalten Sie die tatsächliche Anzeige des Players um, indem Sie auf klicken Result Taste.
  • Drücke den HTML/CSS/JS Schaltflächen zur Anzeige EINES der Codetypen.
  • Später in diesem Dokument werden die Logik, der Ablauf und das Styling der Anwendung in der Player/HTML-Konfiguration, im Anwendungsfluss und im Anwendungsstyling diskutiert Abschnitte. Der beste Weg, um den Informationen in diesen Abschnitten zu folgen, besteht darin:
    1. Drücke den EDIT ON CODEPEN Klicken Sie im CodePen auf die Schaltfläche und halten Sie den Code in einem Browser / einer Browser-Registerkarte bereit.
    2. Passen Sie in CodePen an, welcher Code angezeigt werden soll. Sie können die Breite verschiedener CodeAbschnitte in CodePen ändern.
    3. Sieh den Player-/HTML-Konfiguration , Bewerbungsablauf und/oder Bewerbungsstyling Abschnitte in einem anderen Browser/Browser-Tab. Sie können nun den Codeerklärungen folgen und gleichzeitig den Code anzeigen.

Entwicklungs-Sequenz

Hier ist die empfohlene Entwicklungssequenz:

  1. Verwenden Sie die In-Page-Embed-Player-Implementierung, um die Funktionalität Ihres Players, Plugins und CSS zu testen (falls CSS benötigt wird)
  2. Legen Sie JavaScript und CSS des Plugins in separate Dateien zum lokalen Testen
  3. Stellen Sie den Plugin-Code und das CSS auf Ihrem Server bereit, sobald Sie Fehler herausgefunden haben
  4. Benutze Studio, um das Plugin und das CSS deinem Player hinzuzufügen
  5. Ersetzen Sie die In-Page-Embed-Player-Implementierung, wenn Sie feststellen, dass die Iframe-Implementierung besser passt (im nächsten Abschnitt beschrieben)

Weitere Informationen zu diesen Schritten finden Sie in der Schritt-für-Schritt-Anleitung: Leitfaden zur Entwicklung von Plugins

iframe oder In-Page einbetten

Bei der Entwicklung von Verbesserungen für den Brightcove Player müssen Sie entscheiden, ob der Code am besten für die Iframe- oder In-Page-Einbettungsimplementierung geeignet ist. Die Best Practice-Empfehlung besteht darin, ein Plugin zur Verwendung mit einer Iframe-Implementierung zu erstellen. Die Vorteile der Verwendung des iFrame-Players sind:

  • Keine Kollisionen mit vorhandenem JavaScript und/oder CSS
  • Reaktionsschnell
  • Der iframe erleichtert die Verwendung in Social-Media-Apps (oder wann immer das Video in andere Apps „reisen“ muss)

Obwohl die Integration des In-Page-Einbettungsplayers komplexer sein kann, planen Sie Ihren Code in dieser Implementierung manchmal. Um zu verallgemeinern, ist dieser Ansatz am besten, wenn die enthaltende Seite mit dem Spieler kommunizieren muss. Im Einzelnen sind hier einige Beispiele:

  • Der Code auf der enthaltenden Seite muss Spielerereignisse abhören und darauf reagieren
  • Der Player verwendet Stile von der enthaltenden Seite
  • Der Iframe führt dazu, dass die App-Logik fehlschlägt, wie eine Weiterleitung von der enthaltenen Seite

Selbst wenn Ihre endgültige Implementierung den Iframe-Code nicht verwendet, können Sie den In-Page-Einbettungscode trotzdem mit einem Plugin für Ihr JavaScript und einer separaten Datei für Ihr CSS verwenden. Dies kapselt Ihre Logik, sodass Sie sie problemlos in mehreren Spielern verwenden können.

Verwendete API/Plugin-Ressourcen

API-Methoden API-Ereignisse API-Eigenschaften
am () Loadstart player.mediainfo
Player.controlBar.CustomControlSpacer.el ()    

Player-/HTML-Konfiguration

Dieser Abschnitt beschreibt jede spezielle Konfiguration, die während der Spielererstellung erforderlich ist. Darüber hinaus werden andere HTML-Elemente beschrieben, die der Seite über den In-Page-Einbettungsplayer-Implementierungscode hinaus hinzugefügt werden müssen.

Player-Konfiguration

Für den Brightcove Player, den Sie für dieses Beispiel erstellen, ist keine spezielle Konfiguration erforderlich.

Anderes HTML

Der Seite werden keine anderen HTML-Elemente hinzugefügt.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

  • Erstellen Sie einen regulären Ausdruck, um die WebVTT-Formatierung aus der Datei zu entfernen.
  • Warten Sie auf das loadstart Ereignis und rufen Sie die URL zur WebVTT-Datei mit Untertiteln ab.
  • Baue einen Button und platziere ihn in die Steuerleiste.
  • Laden Sie bei einem Tastenklick die Remote-WebVTT-Datei mit einem XMLHttpRequest() Objekt herunter.
  • Verwenden Sie die download JavaScript-Bibliothek, um den Browser die Datei herunterladen zu lassen.

Definieren Sie den regulären Ausdruck

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// ### Define the regular expression ###

Sie müssen einen regulären Ausdruck erstellen, um unerwünschte Formatierungen aus der WebVTT-Datei zu entfernen. In diesem Fall entfernt die Regex Zeilen, die mit der Standardmethode beginnen, Zeiten in einer WEBVTT-Datei zu definieren. Wenn Sie kein Regex-Experte sind, finden Sie möglicherweise https://regexr.com/ der Hilfe.

URL abrufen und Datei abrufen

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// ### Retrieve the URL for the text track, which is in this case a WebVTT caption file ###

Sie müssen warten, bis das loadstart Ereignis auf die mediainfo Eigenschaft zugreift, die die Textspurinformationen enthält. Beachten Sie, dass Sie, wenn die Seite von einer sicheren (https) Seite aus bereitgestellt wird, die URL zur Datei ändern müssen, um auch eine sichere Verbindung zu verwenden. Sobald Sie die richtige URL haben, rufen Sie die getFile() Methode auf, die die Datei tatsächlich zurückgibt. Schließlich verwenden Sie die replace() JavaScript-Methode in Verbindung mit dem regulären Ausdruck, um den Text neu zu formatieren.

Baue einen Button und platziere ihn in die Steuerleiste

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// ### Create button and place in player ###

Ein HTML-Schaltflächenelement wird erstellt und in der Steuerleiste platziert. Beachten Sie, dass der click Ereignis-Listener ebenfalls dynamisch hinzugefügt wird. In diesem Fall befindet sich die Schaltfläche im spacer Bereich der Steuerleiste. Weitere Einzelheiten zu den spacer , siehe die Anpassen des Aussehens des Spielers dokumentieren.

Holen Sie sich die Datei basierend auf der bereitgestellten URL

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// ### Function that gets the actual file based on URL ###

Diese Funktion verwendet AJAX über ein XMLHttpRequest Objekt, um die Datei abzurufen. Asynchrone Verhalten bestimmt die Verwendung einer Callback-Funktion.

Laden Sie die geänderte Datei auf den Benutzercomputer herunter

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// ### download function used for graceful browser download ###

Wie bereits in diesem Dokument erwähnt, ist das Verhalten der Standardbrowser höchstwahrscheinlich NICHT das, was Sie möchten. Dies ist eine neue Registerkarte oder ein neues Fenster, das zum Anzeigen der Datei geöffnet wird. Dieses JavaScript-Tool erzwingt einen Dateidownload der Textdatei.

Styling der Anwendung

Das CSS legt die Farben und Position der Schaltflächen in der Steuerleiste fest.

Plugin-Code

Normalerweise sind bei der Umwandlung des JavaScript in ein Brightcove Player-Plugin nominelle Änderungen erforderlich. Eine erforderliche Änderung besteht darin, die Standardverwendung der ready() Methode durch den Code zu ersetzen, der ein Plugin definiert.

Hier ist der sehr häufig verwendete Start zu JavaScript-Code, der mit dem Player funktioniert:

videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
});

Sie ändern die erste Zeile, um die Standardsyntax zum Starten eines Brightcove Player-Plugins zu verwenden:

videojs.registerPlugin('pluginName', function(options) {
var myPlayer = this;
...
});

Wie bereits erwähnt, können Sie den JavaScript-Code des Plugins im entsprechenden GitHub Repo dieses Dokuments sehen: download-transcript.js.

Verwenden des Plugins mit einem Player

Sobald Sie die CSS- und JavaScript-Dateien des Plugins an einem für das Internet zugänglichen Ort gespeichert haben, können Sie das Plugin mit einem Player verwenden. Im Studio SPIELER Modul können Sie einen Spieler wählen, dann in der PLUGINS fügen Sie die URLs zu den CSS- und JavaScript-Dateien hinzu und fügen Sie auch die Name und Optionen , wenn Optionen benötigt werden.