Hinzufügen von Kapiteln zu einem Video

In diesem Thema wird erläutert, wie Sie Kapitelvideos für den Brightcove Player erstellen.

Kapitel erleichtern es den Zuschauern, zu einem bestimmten Punkt in einem Video zu gelangen. Dies ist besonders hilfreich für längere Videos. Anstatt durch das Video zu schrubben, kann ein Kapitelmenü verwendet werden, um zu einer bestimmten Stelle im Video zu springen.

 

Arbeitsprobe

Sehen wir uns zunächst ein funktionierendes Beispiel eines Videos mit Kapiteln an. Spielen Sie das Video unten ab und bewegen Sie die Maus über die Kapitelmenü Symbol, um das Kapitelmenü anzuzeigen.

So funktioniert es

Kapitelvideo erfordert:

  • Ein Brightcove-Player - keine besonderen Eigenschaften, Stile oder Plugins erforderlich
  • Eine WebVTT-Datei, die die Kapitel des Videos beschreibt - zum Beispiel: 
    WEBVTT

00:00:00.000 --> 00:00:30.000
Lionfish

00:00:30.000 --> 00:00:54.000
Anemone

00:00:54.000 --> 00:01:25.000
Clownfish

00:01:25.000 --> 00:01:54.000
Sea Horse

00:01:54.000 --> 00:02:23.000
Crab

00:02:23.000 --> 00:02:35.000
Dolphins

Beachten Sie im obigen Beispiel, dass jeder Kapiteleintrag aus zwei Zeilen besteht:

  1. Die Start- und Endzeit für das Kapitel im Format: hours:minutes:seconds.milliseconds (beispielsweise: 00: 02: 23.000) und wird streng analysiert; Zahlen müssen bei Bedarf mit Nullen aufgefüllt werden
  2. Der Kapiteltitel, der im Player-Kapitelmenü angezeigt wird. Beachten Sie, dass nur einfacher Text unterstützt wird und der Titel keine Teilzeichenfolge enthalten darf -->

Die WebVTT-Datei kann auf drei Arten mit einem Video verknüpft werden:

  1. Laden Sie die WebVTT-Datei mit dem WebVTT-Dateien aufnehmen Dokument in der Dynamic Ingest API Information.
  2. Fügen Sie die URL für die WebVTT-Datei in der Textspureigenschaften für das Video in Studio - Achten Sie darauf, die einzustellen Kind Zu Chapters:
    Studio-Textspur-Einstellungen
  3. Verweisen Sie auf die URL der WebVTT-Datei in a <track> Tag zum In-Page-Einbettungscode: 
                <video-js
              data-video-id="4426931680001"
              data-account="1752604059001"
              data-player="default"
              data-embed="default"
              class="video-js" controls>
                  <track src="/assets/webvtt/sea-marvels-chapters.vtt" kind="chapters" label="Chapters" srclang="en">
            </video-js>
            <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

Fügen Sie die WebVTT-Datei für die Kapitel mithilfe von hinzu <track> Tag zum In-Page-Einbettungscode:

            <video-js
              data-account="3676484086001"
              data-player="df134dc9-c997-4464-a69c-e36acf59aef7"
              data-embed="default"
              class="video-js" controls>
                  <track src="/assets/webvtt/sea-marvels-chapters.vtt" kind="chapters" label="Chapters" srclang="en">
              </video-js>
            <script src="https://players.brightcove.net/3676484086001/df134dc9-c997-4464-a69c-e36acf59aef7_default/index.min.js"></script>

Die folgende Grafik zeigt, wie das Kapitelmenü im Player aus der webVTT-Datei generiert wird:

Spieler-Vtt-Interaktion

Veröffentlichen des Players

Sie können entweder die Iframe- oder die In-Page-Einbettung verwenden - Kapitel funktionieren in beiden Fällen gleich.

Da Sie der track für die VTT-Datei ein video Tag hinzufügen müssen, müssen Sie die In-Page-Einbettung für das kapitelübertragende Video verwenden.

Es sind keine zusätzlichen Plugins, CSS oder JavaScript-Code erforderlich.