Producto (s)
Video Cloud
Brightcove Player
Papel (s)
Desarrollador de reproductor
Tema (s)
Superposiciones
Plugins
Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC

En este tema, aprenderá a usar el complemento Overlay y cómo se puede implementar en Studio y mediante una codificación personalizada. El complemento de superposición se puede usar para mostrar mensajes simples como una superposición semitransparente en la parte superior del reproductor.

Resumen

Puede controlar la visualización del mensaje de superposición en función de:

El video de muestra a continuación demuestra el uso del complemento de superposición. Aparecerá una superposición al inicio, así como diferentes períodos de tiempo, uno que comienza en cinco segundos. Comience y pause el video para ver que la superposición reacciona a esos eventos.

Este tema contiene las siguientes secciones:

Implementación usando el modulo de Reproductor

Para implementar el complemento de superposición mediante el módulo de jugadores, siga estos pasos:

  1. Abra la JUGADORES módulo y cree un nuevo jugador o localice el jugador al que desea agregar el complemento.

    Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC

  2. Haga clic en el enlace para que el jugador abra las propiedades del jugador.
  3. Haz click Plugins en el menú de navegación izquierdo.
  4. A continuación, haz clic Añadir un complemento.
  5. Para el Plugin Name entrar overlay.
  6. Para el JavaScript URL, ingrese:
    https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js
  7. Para el CO URL, ingrese:
    https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css
  8. Ingrese las opciones de configuración en Opciones (JSON) caja de texto. El siguiente ejemplo mostrará un ancla en la parte inferior del jugador que comienza en la segunda marca de 2 y termina en la segunda marca de 6.
    {
      "overlays": [
        {
          "align": "bottom",
          "start": 2,
          "end": 6,
          "content": "<a href='http://www.brightcove.com'>Proceed to Home Page</a>"
        }
      ]
    }
  9. Compruebe que el formulario aparezca como sigue:
  10. Haz click Guardar.
  11. Para publicar el reproductor, haga clic C Mujer Sudaderas Gant Marino Sweat neck Textil Chenille q3AL54RjPublicar e incrustar> Publicar cambios.
  12. Para cerrar el cuadro de diálogo abierto, haga clic Cerrado.

Implementar usando código

Para implementar el complemento utilizando código personalizado, configurará las siguientes propiedades de complemento:

  • scripts - JavaScript suministrado para el complemento y no cambiará para las diferentes implementaciones de complementos
  • stylesheets - Se le proporcionó CSS ​​para el complemento y no cambiará para las diferentes implementaciones de complementos
  • plugin name - Siempre overlay
  • plugin options - Contiene una matriz de propiedades y valores

Para agregar el complemento a su código, siga estos pasos:

  1. Agregue la hoja de estilo predeterminada del complemento de superposición. Puede usar la hoja de estilo predeterminada o crear sus propios estilos.
    <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'>
  2. Agregue la videojs-overlay.js archivo de script para incluir el complemento de superposición. Este complemento se registrará automáticamente cuando se incluya en su página.
    <video-js id="yvTq"
        data-account="1752604059001"
        data-player="a5bb5681-9bfb-4203-9dac-eb3b98c8b4b2"
        data-embed="default"
        class="zuE1N" controls>
    </video-js>
    
    <script src="https://players.brightcove.net/1752604059001/a5bb5681-9bfb-4203-9dac-eb3b98c8b4b2_default/index.min.js"></script>
    
    <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>
  3. Obtener una referencia a la Brightcove jugador. En este ejemplo, estamos creando una variable llamada myPlayer y asignarle una referencia al jugador.
    <script>
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
      });
    </script>

    Para mostrar un mensaje de superposición, use la options

    Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC
    propiedad para pasar datos al complemento. Este ejemplo muestra cómo incluir mensajes 3 superpuestos:

    • Primera superposición:
      • Esto se muestra cuando el play evento se envía y se oculta cuando el pause evento es enviado.
    • Segunda superposición:
      • Esto se muestra cuando la reproducción del video pasa los 5 segundos y se oculta cuando la reproducción del video pasa los 10 segundos.
      • Esto se coloca en la esquina inferior derecha del jugador.
    • Tercera superposición:
      • Esto se muestra cuando la reproducción del video pasa los 12 segundos y se oculta cuando la reproducción del video pasa los 17 segundos.
      • Esto se coloca en la esquina inferior izquierda del jugador.
      • Como esta superposición no tiene un content opción definida, usa el valor predeterminado de Contenido de superposición predeterminado, definido antes del overlays formación.

    Si incluye la secuencia de comandos de superposición en su código, puede definir mensajes de la siguiente manera:

    <script id="N7ro1z8G" type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        myPlayer.overlay({
        content: '<strong>Default overlay content</strong>',
        overlays: [{
          align: "top",
          content: 'This event-triggered overlay message appears when the video is playing',
          start: 'play',
          end: 'pause'
        }, {
          content: 'This timed overlay message appears between 5 and 10 seconds',
          start: 5,
          end: 10,
          align: 'bottom-right'
        }, {
          start: 12,
          end: 17,
          align: 'bottom-left'
        }]
      });
    
    </script>
    Zapatos Derbie Muratti Mujer Topotea Bleuene kXiulOPwZT

opciones

Las siguientes opciones de complemento se utilizan para controlar el objeto de superposición:

  • align:
    • El valor debe ser un valor de cadena admitido.
    • Esto define dónde mostrar la superposición. Si incluye la hoja de estilos predeterminada, se admiten los siguientes valores: top-left, top, top-right, right, bottom-right, bottomMarrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC, bottom-left, left.
  • attachToControlBar:
    • El valor puede ser una cadena o booleano. Si el valor es una cadena, el valor debe ser el nombre de un componente ControlBar.
    • Si se establece en true o un valor de cadena, las superposiciones alineadas en la parte inferior ajustarán el posicionamiento cuando la barra de control se minimice. Esto no tiene efecto en las superposiciones que no están alineadas en la parte inferior, inferior izquierda o inferior derecha. La opción es para usar con la barra de control predeterminada, y puede no funcionar para barras de control personalizadas. Las superposiciones alineadas inferiores se insertarán antes del componente especificado. De lo contrario, las superposiciones alineadas en la parte inferior se insertan antes del primer componente secundario de la Barra de control. Todas las demás superposiciones se insertan antes del componente ControlBar.

    • La opción puede establecerse para todas las alineaciones elegibles al usarla en el nivel superior:
      myPlayer.overlay({
        content: 'Default overlay content',
        attachToControlBar : true,
        overlays: [{
          align: "top",
          content: 'This event-triggered overlay message appears when the video is playing',
          start: 'play',
          end: 'pause'
        }, {
          content: 'This timed overlay message appears between 5 and 10 seconds',
          start: 5,
          end: 10,
          align: 'bottom-right'
        }, {
          start: 12,
          end: 17,
          align: 'bottom-left'
        }]
      });

      O para objetos de superposición individuales:

      myPlayer.overlay({
        content: 'Default overlay content',
        overlays: [{
          align: "top",
          content: 'This event-triggered overlay message appears when the video is playing',
          start: 'play',
          end: 'pause'
        }, {
          content: 'This timed overlay message appears between 5 and 10 seconds',
          start: 5,
          end: 10,
          align: 'bottom-right'
        }, {
          start: 12,
          end: 17,
          align: 'bottom-left',
          attachToControlBar : true
        }]
      });

      Una configuración de nivel superior puede anularse mediante el uso de opciones en objetos de superposición individuales.

    • Mujer Textil Vestidos Manoush AzulDorado Cortos Neoprene POZXTkiu
    • El impacto visual se puede ver en estas capturas de pantalla:
      attachToControlBar opción NO utilizada
      (la superposición no se mueve independientemente de si la barra de control está visible o no)
      attachToControlBar utilizado con la barra de control mostrada
      attachToControlBar utilizado y barra de control oculta
      (la superposición se mueve con la visibilidad de la barra de control)
  • class:
    • Una clase HTML personalizada para agregar a los elementos superpuestos. Usted define el estilo como lo haría con cualquier selector de clase, con la excepción de que debe usar el .video-js selector junto con el selector que elija (la especificidad debe aumentarse para que el estilo no se anule):
      .video-js .customOverlay {
        color: yellow;
        background-color: red;
      }
    • La opción puede establecerse para todas las alineaciones elegibles al usarla en el nivel superior: Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC
      myPlayer.overlay({
        content: 'Default overlay content',
        class: 'customOverlay',
        overlays: [{
          align: "top",
          content: 'This event-triggered overlay message appears when the video is playing',
          start: 'play',
          end: 'pause'
        }, {
          content: 'This timed overlay message appears between 5 and 10 seconds',
          start: 5,
          end: 10,
          align: 'bottom-right'
        }]
      });

      O para objetos de superposición individuales:

      myPlayer.overlay({
        content: 'Default overlay content',
        overlays: [{
          class: 'customOverlay',
          align: "top",
          content: 'This event-triggered overlay message appears when the video is playing',
          start: 'play',
          end: 'pause'
        }, {
          class: 'customOverlay2',
          content: 'This timed overlay message appears between 5 and 10 seconds',
          start: 5,
          end: 10,
          align: 'bottom-right'
        }]
      });

      Una configuración de nivel superior puede anularse mediante el uso de opciones en objetos de superposición individuales.

  • content:
    • El valor puede ser una cadena o un objeto DOM.
    • Este es el HTML que se incluirá en la superposición. Puede pasar una cadena, un elemento HTML o un DOM DocumentFragment.
    • El valor predeterminado es la cadena This overlay will show up while the video is playing.
    • Esta opción se puede establecer en el nivel superior o para objetos de superposición individuales.
  • end:
    • El valor puede ser una cadena o número.
    • Esto define cuándo ocultar una superposición. Si el valor es una cadena, se interpreta como un nombre de evento. Si es un número, la superposición se ocultará cuando haya transcurrido ese tiempo (en segundos) en la reproducción del video. Si el valor es una cadena, se interpreta como Brightcove Player nombre del evento, como play, pause
      or ended. Una lista de todos los eventos de jugadores se encuentra en Player API.
  • overlays:
    • Una matriz de objetos superpuestos.
    • Un objeto superpuesto debe consistir en al menos un start y endMarrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC opción. Otras opciones utilizadas según lo deseado.
  • showBackground:
    • El valor es booleano
    • Determina si se incluye o no el estilo de fondo y el relleno alrededor de la plantilla. Esta configuración puede anularse al establecerse en objetos de superposición individuales.
  • start:
    • El valor puede ser una cadena o número.
    • Esto define cuándo mostrar una superposición. Si es un número, la superposición se mostrará cuando haya pasado ese tiempo (en segundos) en la reproducción del video. Si el valor es una cadena, se interpreta como Brightcove Player nombre del evento, como play, pause or ended. Una lista de todos los eventos de jugadores se encuentra en Player API.

Puede usar cualquier evento enviado desde el reproductor, que están definidos en Métodos del jugador / API de eventos documento, o puede usar sus propios eventos personalizados.

Todas estas propiedades son opcionales, pero puede obtener resultados extraños si no incluye al menos el start y end propiedades.

Estilo de la superposición

Dos estilos podrían ser útiles para usted cuando trabaje con la superposición. Se detallan aquí.

Ocultar el fondo

El siguiente CSS ocultará el fondo:

.vjs-overlay.vjs-overlay-top.vjs-overlay-background {
  width: 100 % ;
  margin: auto;
  left: 0;
  background: none;
}

Ocultar la superposición

El siguiente CSS ocultará el fondo:Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC

.hide-overlay.vjs-overlay {
  display: none;
}

Ambos estilos son útiles en el Brightcove Player Muestra: alternar una superposición documento.

Mostrar metadatos de video

Es posible que desee mostrar información sobre el video en la superposición. Por ejemplo, muestre algún mensaje de uno de los campos personalizados del video, antes de que el video comience a reproducirse, como se muestra en captura de pantalla a continuación.

1199708 Para Zapatos DigelStig Zapatos De es Diario 20 Hombre 9DIHWYE2

La siguiente sección explica cómo hacer esa tarea en particular, pero además, una vez que tenga datos del información de los medios Objeto, cualquier metadata de video se puede mostrar cuando lo desee.

  • Línea 112: incluye el CSS para el complemento de superposición.
  • Líneas 113-124: CSS para realizar lo siguiente:
    • Cambiar el tamaño del jugador
    • Establezca el tamaño y el color de la fuente para el mensaje
    • Establecer el ancho de la superposición
    • Cambiar el color de fondo de la superposición
  • Líneas 128-135: código de inserción in-page estándar utilizado. Tenga en cuenta una id está agregado.
  • Línea 136: especifique la fuente del código JavaScript para el complemento de superposición.
  • Líneas 139,140,152: configuración estándar para usar código con el reproductor.
  • Líneas 141,151: use la on() método para agregar un detector de eventos para el loadstart evento. En la función del controlador de eventos anónimos, puede actuar sobre el video en el reproductor, como silenciarlo y usar información del mediainfo objeto.
  • Líneas 143,150: llamar al
    overlay() método.
  • Líneas 144-149: defina una sola superposición usando el content para mostrar el mensaje almacenado en el campo personalizado, usando la variable de JavaScript myPlayer.mediainfo.customfield1. La superposición se mostrará una vez que se cargue el video ( start: 'loadedmetadata') y desaparecen una vez que comienza el video (end: 'play').
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Video.js Overlay</title>

  <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'>
  <style type="text/css">
    .video-js{
      width: 600px;
      height: 338px;
    }
    .vjs-overlay.vjs-overlay-bottom-left {
      font-size: 1.5em;
      width: 60%;
      color: red;
      background-color: black;
    }
  </style>
</head>
<body>

  <video-js id="yvTq"
    data-video-id="3495887198001"
    data-account="1507807800001"
    data-player="N1gSjfUW6x"
    data-embed="default"
    class="zuE1N"
    controls></video-js>
  <script src="https://players.brightcove.net/1507807800001/N1gSjfUW6x_default/index.min.js"></script>
  <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.on('loadstart',function() {
        myPlayer.muted(true);
        myPlayer.overlay({
          overlays: [{
            align: 'bottom-left',
            content: myPlayer.mediainfo.custom_fields.customfield1,
            start: 'loadedmetadata',
            end: 'play'
          }]
        });
      });
    });
  </script>

</body>
</html>

Historial de cambios

19 septiembre 2018

v2.1.4

  • Corrección de errores: exponer correctamente la versión del complemento
  • Corrección de errores: elimine la secuencia de comandos postinstalación para evitar problemas de instalación
  • Actualizado a generator-videojs-plugin 7.2.0

Agosto 23 2018

v2.1.3

  • Actualización al generador v7

2018

v2.1.2

  • Babel la distribución ES actualizando el generador
  • Paquete: dependencias actualizadas y habilitado Greenkeeper

5 July 2018Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC

v2.1.1

  • Actualización al generador v6

20 2018 abril

v2.1.0

Agosto 24 2017

v2.0.0

  • Se corrigió la alineación central vertical y se agregó el centro de alineación
  • Se arregló el enlace README malformado
  • Se eliminaron las transformaciones globales de navegador, por lo que los paquetes principales no se rompen
  • Actualizado para usar las herramientas Generator v5

3 2017 abril

v1.1.4

  • Se eliminaron las transformaciones globales de navegador, por lo que los paquetes principales no se rompen

27 2017 febrero

v1.1.3

  • Se actualizó Travis para probar Video.js 5 / 6

3 2017 febrero

v1.1.2

  • Compatibilidad cruzada de Video.js 5 y 6 añadida

Agosto 5 2016

v1.1.1

  • Solucionado el problema donde max-width se estaba estableciendo en todas las superposiciones en lugar de solo aquellas showBackground=false

27 de julio del 2016

v1.1.0

  • No se informaron cambios, solo nueva compilación

Junio ​​10 2016Humat Sarenza392767 TrenzadoamarilloZuecos Chez Julia TrenzadoamarilloZuecos Humat Julia eEDH29IYW

v1.0.2

  • Retire las superposiciones viejas cuando sean niños

Marzo 8 2016

v1.0.1

  • Se corrigió #22, no debería haber estado buscando solo enteros

12 2016 febrero

v1.0.0

  • Refactorización principal del complemento para alinearse con los estándares de generador-videojs-plugin
  • Se corrigieron importantes problemas de mayúsculas y minúsculas con la creación / destrucción de superposiciones

29 2014 abril

v0.1.0

Marrón Botines Mujer Mtng Karma Zapatos EeQdxBoWrC
  • Versión inicial