Support kontaktieren | Systemstatus
Seiteninhalt

    Hinzufügen von Kapiteln zu einer Video

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

    Arbeitsprobe

    Schauen wir uns zunächst ein funktionierendes Beispiel eines in Kapitel unterteilten Videos an - starten Sie das Video unten und fahren Sie mit der Maus über das chapter menu Symbol, um das Kapitelmenü anzuzeigen:

    Wie es funktioniert

    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 Aufnahme von WebVTT-Dateien Dokument im Dynamische Aufnahme-API Information.
    2. Fügen Sie die URL für die WebVTT-Datei in der Eigenschaften der Textspur für das Video in Studio - Stellen Sie sicher, dass Sie auf die erweiterten Einstellungen zugreifen und die Einstellungen vornehmen Kind zu Chapters::
      studio text track settings
    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:

    player-vtt-interaction

    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.


    Seite zuletzt aktualisiert am 19 Apr 2021