Contacter le support | État du système
Contenu de la page

    Ajouter des chapitres à une vidéo

    Cette rubrique explique comment créer une vidéo par chapitres pour Brightcove Player.
     

    Exemple de travail

    Commençons par regarder un échantillon fonctionnel de la vidéo en chapitres - démarrez la vidéo ci-dessous et passez la souris sur le chapter menu icône pour afficher le menu des chapitres :

    Fonctionnement

    La vidéo chapitrée nécessite :

    • Un lecteur Brightcove - aucune propriété spéciale, aucun style ou plug-in 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 :

    1. 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é ; les nombres doivent être rembourrés à zéro si nécessaire
    2. 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 :

    1. Téléchargez le fichier WebVTT en utilisant le Ingérer des fichiers WebVTT documenter dans le API d'ingestion dynamique informations.
    2. Ajoutez l'URL du fichier WebVTT dans les propriétés Text Track de la vidéo dans Studio. Assurez-vous d'accéder aux paramètres avancés et de Kind définir la valeur sur Chapters:
      studio text track settings
    3. 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 :

    player-vtt-interaction

    Publication du lecteur

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

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

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


    Dernière mise à jour de la page le 20 Apr 2021