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

    Configurar una sobreimpresión de reproductor con el complemento plug-in Overlay

    En este tema aprenderá cómo puede ver la información del jugador desde la ventana Modal Información del Jugador.

    El Overlay plugin permite que tanto el texto como las imágenes se utilicen como superposiciones. El overlay complemento también se puede configurar para cuándo aparece la superposición y durante cuánto tiempo. Para añadir una superposición de imagen simple a un reproductor, utilice las opciones de estilo del reproductor. Consulte Reproductores de estilos para obtener más información.

    Las sobreimpresiones pueden consistir en imágenes o mensajes simples que aparecen en la parte superior del reproductor. En este ejemplo, en la parte inferior derecha del reproductor aparecerá el logotipo de Brightcove a partir del segundo 2 del vídeo y durante 6 segundos.

    Usted puede determinar cómo debe visualizar la sobreimpresión en función de:

    • Eventos de jugador : mostrar la superposición en función de eventos del reproductor como reproducción, pausa o eventos personalizados
    • Intervalos de tiempo : mostrar la superposición a una hora especificada durante la reproducción de vídeo

    Las superposiciones se configuran mediante el overlay complemento. Al configurar este complemento, deben indicarse una URL de JavaScript, un archivo CSS, el nombre del complemento y las opciones del mismo.

    Overlay opciones de plugin

    Las opciones de este complemento permiten configurar cuándo la sobreimpresión debe aparecer y desaparecer, qué contenido debe mostrar y en qué lugar de la pantalla. El complemento ofrece las siguientes opciones (formateadas como JSON):

    • start - Define cuándo mostrar una superposición. El valor puede ser numérico o una cadena de caracteres. Si el valor es un número, la sobreimpresión aparecerá cuando haya transcurrido el número indicado de segundos en la reproducción del vídeo. Si el valor es una cadena, se interpreta como un nombre de evento de Brightcove Player play, como pause o ended. En la Player API se encuentra una lista de todos los eventos del reproductor.
    • end - Define cuándo ocultar una superposición. El valor puede ser numérico o una cadena de caracteres. Si el valor es un número, la sobreimpresión se ocultará cuando haya transcurrido el número indicado de segundos en la reproducción del vídeo. Si el valor es una cadena, se interpreta como un nombre de evento de Brightcove Player play, como pause o ended. En la Player API se encuentra una lista de todos los eventos del reproductor.
    • content - Define lo que se mostrará como superposición. Este valor puede ser una cadena de caracteres o un objeto DOM. Se puede entregar una cadena, un elemento HTML (imagen) o un DOM de tipo DocumentFragment.
    • align - Define dónde mostrar la superposición. Se admiten los siguientes valores: top-left, top, top-right, right, bottom-right, bottom, bottom-left, left

    Las opciones activadas en el ejemplo siguiente mostrarán el logotipo de Brightcove a partir del segundo 2 del vídeo y lo ocultarán cuando el vídeo haya pasado del segundo 6:

    
    {
      "overlays": [
        {
          "start": 2,
          "end": 6,
          "content": "<a href='https://www.brightcove.com' target='_blank'><img src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
          "align": "bottom-right"
        }
      ]
    }
      

    Configurar una sobreimpresión de reproductor

    Para implementar el Overlay Plugin utilizando el módulo Reproductores, siga estos pasos:

    1. Abra el módulo Players e identifique el reproductor.
    2. Haga clic en el enlace del reproductor para abrir las propiedades del mismo.
    3. Haga clic en Plugins en la navegación izquierda.
    4. Haga clic en Agregar un complemento > personalizado.
    5. Para Nombre del complemento, escriba overlay.
    6. Para la URL de JavaScript, escriba:
      //players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js
    7. Para la URL CSS, escriba:
      //players.brightcove.net/videojs-overlay/2/videojs-overlay.css
      	
    8. Introduzca las opciones (JSON). En el ejemplo siguiente se mostrará una imagen clicable en la parte inferior del reproductor a partir de la marca del segundo 2, que se ocultará al alcanzarse la marca del segundo 6.
      {
      	  "overlays": [
      	    {
      	      "start": 2,
      	      "end": 6,
      	      "content": "<a href='https://www.brightcove.com' target='_blank'><img src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
      	      "align": "bottom-right"
      	    }
      	  ]
      	}
    9. Haga clic en Guardar y publicar el reproductor. Tenga en cuenta que los cambios pueden tardar hasta 5 minutos en aparecer en reproductores publicados.

    Tenga en cuenta que se pueden configurar múltiples sobreimpresiones en cada reproductor. Para obtener más información, consulte la documentación para desarrolladores.

    Para obtener un ejemplo de cómo usar CSS para aplicar estilo a una superposición de reproductor, consulte el documento del desarrollador del Overlay complemento de logotipos .


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