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

    Agregar una transcripción interactiva de 3Play Media a un vídeo

    En este tema aprenderá cómo utilizar el plugin 3Play para agregar una transcripción interactiva a un Brightcove Player.

    Se puede mostrar una transcripción interactiva junto a un reproductor para mostrar el texto hablado en un vídeo. A medida que el usuario escucha las palabras que se están diciendo, las palabras coincidentes en la transcripción se subrayan o resaltan. Las transcripciones interactivas se pueden utilizar para controlar la experiencia de visualización. Por ejemplo, los espectadores pueden buscar la transcripción del vídeo y navegar hasta un punto exacto haciendo clic en cualquier palabra.

    Si va a publicar vídeos mediante una experiencia de Gallery In-Page, se puede agregar un componente 3Play a la experiencia para mostrar transcripciones de vídeo. Para obtener más información, consulte Adición de componentes a una experiencia en página.

    A continuación se muestra un video de muestra con la transcripción asociada.

    3Play Media ofrece dos métodos de inserción para publicar complementos:

    Uso de la incrustación de iFrame

    El método de inserción iFrame proporciona el código de inserción iFrame necesario para incrustar un reproductor de vídeo con la transcripción asociada a continuación. Esta es una forma sencilla de agregar una transcripción a un reproductor sin la necesidad de ninguna codificación.

    Para generar la incrustación de iFrame para un reproductor y una transcripción, siga estos pasos.

    1. Inicie sesión en su cuenta de 3Play.
    2. Localice el vídeo para el que desea mostrar una transcripción y, a continuación, haga clic en el título.
    3. Haga clic en > Publicar complementode publicación.
    4. Expanda la sección Configuración de vídeo.
    5. Introduzca el ID del reproductor del Brightcove Player en el que desea publicar el vídeo. El ID de vídeo y el número de cuenta deben rellenarse con el ID de vídeo seleccionado y el número de cuenta de Video Cloud.
    6. En la sección Características del complemento , seleccione Transcripción interactiva y, a continuación, seleccione las opciones adecuadas.
    7. Expanda la sección Configuración de estilo y establezca un ancho y alto para el complemento. Tenga en cuenta que la anchura y la altura incluirán tanto la incrustación de vídeo como la transcripción.
    8. Copie el código de inserción y péguelo en su página HTML.

    Hay una opción para Guardar nueva plantilla. 3Play Media ofrece la posibilidad de guardar una plantilla de plugin. Luego, para el siguiente video, puede seleccionar una plantilla en lugar de tener que configurar el plugin cada vez. Además, los cambios realizados en una plantilla se reflejarán dentro de todos los complementos publicados, por lo que actualizar la apariencia de varios complementos es más fácil. Para obtener más información sobre cómo trabajar con plantillas de plugin, consulte el documento de 3Play Create and Manage Plugin Templates.

    Usar la inserción de JavaScript

    La opción de inserción de JavaScript ofrece más personalización que el método de inserción iFrame. Este método requiere una comprensión básica de JavaScript y CSS. El código de inserción de JavaScript no incluye Brightcove Player, por lo que el código de incrustación del reproductor de Video Cloud debe agregarse a la página como un paso independiente. El código de incrustación del reproductor avanzado se debe utilizar al publicar el vídeo.

    Para generar la incrustación de JavaScript para una transcripción, siga estos pasos.

    1. Inicie sesión en su cuenta de 3Play.
    2. Localice el vídeo para el que desea mostrar una transcripción y, a continuación, haga clic en el título.
    3. Haga clic en > Publicar complementode publicación.
    4. Expanda la sección Configuración de vídeo.
    5. Para el método Incrustar, seleccione Personalizado (Javascript).
    6. Confirme que el tipo de reproductor de vídeo es brightcove. El valor del objetivo de vídeo deberá agregarse al código de inserción del reproductor (hecho en un paso posterior).
    7. En la sección Características del complemento , seleccione Transcripción interactiva y, a continuación, seleccione las opciones adecuadas.
    8. Copie el código de inserción y péguelo en su página HTML.
    9. En la sección Configuración de estilo , copie el texto del identificador en el portapapeles. Este valor se añadirá al código de inserción del reproductor.
    10. Edite el código de inserción del reproductor en su página HTML (desde el módulo Media) agregando el parámetro id a la <video> etiqueta. A continuación se muestra el código de inserción de muestra.

    CSS se puede usar para dar estilo a la transcripción. Por ejemplo, el CSS siguiente establecerá el ancho del cuadro de transcripción, cambiará el color de la palabra actual y cambiará el color del texto y la fuente que se utilizan en la transcripción.

        <tipo de estilo = «text/css» >
        .p3sdk-interactive-transcript {
          width: 640 px;
          }
          .p3sdk-current-word {
          fondo: rojo!importante;
          }
          .p3sdk-interactive-transcript-content p {
          Color: naranja!importante;
          estilo de fuente: cursiva!importante;
          tamaño de fuente: ¡20 px!importante;
          }
          </estilo >
        

    A continuación se muestra la transcripción de muestra.

     

    Para obtener más información sobre el uso de CSS para dar estilo al complemento, consulte Personalizar plugins usando CSS.

    A continuación se presentan algunos recursos útiles que cubren el uso del método de inserción de JavaScript.


    Última actualización de la página el 06 oct 2020