Hinzufügen eines interaktiven 3Play Media-Transkripts zu einem Video

In diesem Thema erfahren Sie, wie Sie mit dem 3Play-Plugin einem Brightcove-Player ein interaktives Transkript hinzufügen.

Ein interaktives Transkript kann neben einem Player angezeigt werden, um den gesprochenen Text in einem Video anzuzeigen. Wenn der Benutzer die gesprochenen Wörter hört, werden die übereinstimmenden Wörter im Transkript unterstrichen oder hervorgehoben. Interaktive Transkripte können verwendet werden, um das Seherlebnis zu steuern. Beispielsweise können Zuschauer das Transkript des Videos durchsuchen und durch Klicken auf ein beliebiges Wort zu einem genauen Punkt navigieren.

Wenn Sie Videos mit einer Galerie-In-Page-Erfahrung veröffentlichen, kann der Erfahrung eine 3Play-Komponente hinzugefügt werden, um Video-Transkripte anzuzeigen. Weitere Informationen finden Sie unter Hinzufügen von Komponenten zu einer In-Page-Erfahrung.

Unten finden Sie ein Beispielvideo mit dem zugehörigen Transkript.

3Play Media bietet zwei Einbettungsmethoden zum Veröffentlichen von Plugins:

Verwenden der iFrame-Einbettung

Die iFrame-Einbettungsmethode stellt den iFrame-Einbettungscode bereit, der zum Einbetten eines Videoplayers mit dem zugehörigen Transkript unten erforderlich ist. Dies ist eine einfache Möglichkeit, einem Spieler ein Transkript hinzuzufügen, ohne dass eine Codierung erforderlich ist.

Führen Sie die folgenden Schritte aus, um die iFrame-Einbettung für einen Player und ein Transkript zu generieren.

  1. Melden Sie sich bei Ihrem 3Play-Konto an.
  2. Suchen Sie das Video, für das Sie ein Transkript anzeigen möchten, und klicken Sie dann auf den Titel.
  3. Klicken Veröffentlichen> Plugin veröffentlichen.
  4. Erweitern Sie die Video-Einstellungen Sektion.
  5. Geben Sie die Spieler-ID des Brightcove-Players, auf dem Sie das Video veröffentlichen möchten. Der Video-ID Und Accountnummer sollte mit der ausgewählten Video-ID und der Brightcove-Kontonummer ausgefüllt werden.
  6. In dem Plugin-Funktionen Abschnitt auswählen Interaktives Transkript und wählen Sie dann die entsprechenden Optionen aus.
  7. Erweitern Sie die Stileinstellungen Abschnitt und setzen Sie a Breite und Höhe für das Plugin. Beachten Sie, dass die Breite und Höhe sowohl die Videoeinbettung als auch das Transkript umfassen.
  8. Kopieren Sie den Einbettungscode und fügen Sie ihn in Ihre HTML-Seite ein.

Es gibt eine Option zu Neue Vorlage speichern. 3Play Media bietet die Möglichkeit, eine Plugin-Vorlage zu speichern. Für das nächste Video können Sie dann eine Vorlage auswählen, anstatt das Plugin jedes Mal konfigurieren zu müssen. Änderungen, die an einer Vorlage vorgenommen wurden, werden auch in allen veröffentlichten Plugins berücksichtigt, sodass das Aktualisieren des Erscheinungsbilds mehrerer Plugins einfacher ist. Weitere Informationen zum Arbeiten mit Plugin-Vorlagen finden Sie im 3Play-Dokument Erstellen und Verwalten von Plugin-Vorlagen.

Verwenden der JavaScript-Einbettung

Die JavaScript-Einbettungsoption bietet mehr Anpassungsmöglichkeiten als die iFrame-Einbettungsmethode. Diese Methode erfordert ein grundlegendes Verständnis von JavaScript und CSS. Der JavaScript-Einbettungscode enthält nicht den Brightcove-Player. Daher sollte der Player-Einbettungscode aus Video Cloud als separater Schritt zur Seite hinzugefügt werden. Der Einbettungscode für den erweiterten Player muss beim Veröffentlichen des Videos verwendet werden.

Führen Sie die folgenden Schritte aus, um die JavaScript-Einbettung für ein Transkript zu generieren.

  1. Melden Sie sich bei Ihrem 3Play-Konto an.
  2. Suchen Sie das Video, für das Sie ein Transkript anzeigen möchten, und klicken Sie dann auf den Titel.
  3. Klicken Veröffentlichen> Plugin veröffentlichen.
  4. Erweitern Sie die Video-Einstellungen Sektion.
  5. Wählen Sie für die Einbettungsmethode Benutzerdefiniert (Javascript) aus.
  6. Bestätige das Videoplayer-Typ ist helle Bucht. Das Video-Ziel Der Wert muss zum Einbettungscode des Players hinzugefügt werden (in einem späteren Schritt).
  7. In dem Plugin-Funktionen Abschnitt auswählen Interaktives Transkript und wählen Sie dann die entsprechenden Optionen aus.
  8. Kopieren Sie den Einbettungscode und fügen Sie ihn in Ihre HTML-Seite ein.
  9. In dem Stileinstellungen Abschnitt kopieren Sie die Ich würde Text in die Zwischenablage. Dieser Wert wird dem Einbettungscode des Players hinzugefügt.
  10. Bearbeiten Sie den Player-Einbettungscode auf Ihrer HTML-Seite (aus dem Medienmodul), indem Sie den hinzufügen Ich würde Parameter zum <video> Etikett. Ein Beispiel für einen Einbettungscode ist unten dargestellt.

CSS kann dann verwendet werden, um das Transkript zu formatieren. Das folgende CSS legt beispielsweise die Breite des Transkriptionsfelds fest, ändert die Farbe des aktuellen Wortes und die Farbe des Textes und der Schriftart, die im Transkript verwendet werden.

    <style type = "text / css">
    .p3sdk-interaktives-Transkript {
      Breite: 640px;
      }
      .p3sdk-aktuelles-Wort {
      Hintergrund: rot! wichtig;
      }
      .p3sdk-interaktiver-Transkript-Inhalt p {
      Farbe: orange! wichtig;
      Schriftstil: kursiv! wichtig;
      Schriftgröße: 20px! Wichtig;
      }
      </ style>

Unten ist das Beispielprotokoll.

 

Weitere Informationen zur Verwendung von CSS zum Gestalten des Plugins finden Sie unter Passen Sie Plugins mithilfe von CSS an.

Im Folgenden finden Sie einige hilfreiche Ressourcen, die die Verwendung der JavaScript-Einbettungsmethode abdecken.