Ajout de chapitres à une vidéo

Les chapitres permettent aux spectateurs d'accéder plus facilement à un point précis d'une vidéo. Ceci est particulièrement utile pour les vidéos plus longues. Plutôt que de parcourir la vidéo, un menu de chapitre peut être utilisé pour passer à un point spécifique de la vidéo.

Échantillon de travail

Commençons par examiner un exemple concret de vidéo chapitrée. Lisez la vidéo ci-dessous et passez la souris sur l'icône pour afficher le menu du chapitre.

Fonctionnement

La vidéo chapitrée nécessite :

Un lecteur Brightcove : aucune propriété, style ou plug-in spéciaux n'est requis

Un fichier WebVTT décrivant les chapitres de la vidéo, par exemple :

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

Dans l'exemple ci-dessus, notez que chaque entrée de chapitre se compose de deux lignes :

Heure de début et de fin du chapitre, au format suivant : hours:minutes:seconds.milliseconds(par exemple : 00:02:23 .000) et est strictement analysée ; les nombres doivent être complétés par des zéros si nécessaire
Titre du chapitre qui apparaîtra dans le menu des chapitres du lecteur. Notez que seul le texte brut est pris en charge et que le titre ne doit pas contenir la sous-chaîne -->

Le fichier WebVTT peut être associé à une vidéo de trois manières :

Téléchargez le fichier WebVTT à l'aide du Ingestion de fichiers WebVTT document dans le Dynamic Ingest API information.
Ajoutez l'URL du fichier WebVTT dans les propriétés de la piste de texte de la vidéo dans Studio. Assurez-vous de Kind définir le paramètre sur Chapters:

Notez que le default la valeur n'est pas par piste, mais réglée sur true pour toutes les pistes de la même langue (srclang)

Référez l'URL du fichier WebVTT dans une <track> balise au code intégré dans la page :

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

Ajoutez le fichier WebVTT des chapitres à l'aide de la <track> balise au code intégré dans la page :

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

Le graphique suivant montre comment le menu des chapitres du lecteur est généré à partir du fichier WebVTT :

Publication du lecteur

Vous pouvez utiliser l'iframe ou l'intégration intégrée à la page. Les chapitres fonctionneront de la même manière dans les deux cas.

Comme vous devrez ajouter une track balise au video fichier .vtt, vous devrez utiliser l'intégration intégrée dans la page pour la vidéo chapeautée.

Aucun plug-in supplémentaire, CSS ou code JavaScript n'est requis.