soporte Contactar con Soporte | Estadoestado del sistema del sistema
Contenido de la página

    Adición de capítulos a un vídeo

    En este tema se explica cómo crear vídeos capítulos para Brightcove Player.
     

    Ejemplo de trabajo

    Comencemos mirando una muestra de trabajo de video capítulos: inicie el video a continuación y pase el ratón sobre el menú de capítulos icono para mostrar el menú del capítulo:

    ¿Cómo funciona?

    El vídeo capitulo requiere:

    • Un reproductor de Brightcove: no se requieren propiedades especiales, estilos o complementos
    • Un archivo WebVTT que describe los capítulos del video, por ejemplo:
                  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

    En el ejemplo anterior, tenga en cuenta que cada entrada de capítulo consta de dos líneas:

    1. La hora de inicio y finalización del capítulo, en el formato: hours:minutes:seconds:milliseconds (por ejemplo: 00:02:23 .000) y se analiza estrictamente; los números deben estar acolchados de cero si es necesario
    2. El título del capítulo que aparecerá en el menú del capítulo del reproductor - tenga en cuenta que sólo se admite texto sin formato, y el título no debe contener la subcadena -->

    El archivo WebVTT se puede asociar con un vídeo de cualquiera de tres maneras:

    1. Cargue el archivo WebVTT utilizando el documento Ingesting WebVTT Files en la Dynamic Ingest API información.
    2. Agregue la URL del archivo WebVTT en las propiedades de pista de texto para el vídeo en Studio - asegúrese de que el acceso a la Configuración avanzada y establezca el Kind en Chapters:
      configuración de pista de texto de estudio
    3. Haga referencia a la URL del archivo WebVTT en una <track> etiqueta al código incrustado de la página:
                  <video-js
                    data-video-id="4426931680001"
                    data-account="1752604059001"
                    data-player="default"
                    data-embed="default"
                    class="video-js" controls>
                        <track src="https://learning-services-media.brightcove.com/chaptered-video/vtt/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>

    Agregue el archivo WebVTT de los capítulos utilizando la <track> etiqueta al código de inserción de la página:

                <video-js
                  data-account="3676484086001"
                  data-player="df134dc9-c997-4464-a69c-e36acf59aef7"
                  data-embed="default"
                  class="video-js" controls>
                      <track src="https://learning-services-media.brightcove.com/chaptered-video/vtt/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>

    El siguiente gráfico muestra cómo se genera el menú de capítulos del reproductor a partir del archivo WebVTT:

    interacción jugador-vtt-

    Publicación del reproductor

    Puede usar el iframe o incrustar en página: los capítulos funcionarán igual en ambos.

    Dado que tendrá que agregar una track etiqueta al video para el archivo.vtt, necesitará usar el incrustado en página para el vídeo capítulos.

    No se requieren complementos adicionales, CSS o código JavaScript.


    Última actualización de la página el 28-09-2020