Muestra de Brightcove Player: Navegar por el final de vídeo

En este tema, aprenderá cómo mostrar una superposición al final del video, que cuando se hace clic navega por la página a una nueva URL.

Ejemplo de jugador

Al finalizar el video muy corto, verá aparecer una superposición con un enlace a la página de inicio de Brightcove. Se utiliza el complemento Overlay suministrado por Brightcove, por lo que no se necesita JavaScript. CSS se utiliza para diseñar la superposición.

Ver la pluma Navegar al final del video por Brightcove Learning Services ( rcrooks1969 ) en CodePen.

Uso de CodePen

Estos son algunos consejos para utilizar eficazmente el CodePen anterior:

  • Cambie la visualización real del reproductor haciendo clic en el Result botón.
  • Haga clic en el HTML/CSS/JS botones para mostrar UNO de los tipos de código.
  • Más adelante, en este documento, la lógica, el flujo y el estilo utilizados en la aplicación se analizarán en la configuración de reproductor/HTML, Flujo de aplicaciones y Estilo de la aplicación. secciones. La mejor manera de seguir la información de estas secciones es:
    1. Haga clic en el EDIT ON CODEPEN en el CodePen y tenga el código disponible en un navegador / pestaña del navegador.
    2. En CodePen, ajusta el código que quieres que se muestre. Puede cambiar el ancho de las distintas secciones de código dentro de CodePen.
    3. Ver el Configuración de reproductor / HTML , Flujo de aplicación y / o Estilo de aplicación secciones en otra pestaña del navegador / navegador. Ahora podrá seguir las explicaciones del código y, al mismo tiempo, ver el código.

Recursos de API/plugins utilizados

Complementos de Brightcove Player
Complemento de superposición de pantalla

Estilismo de aplicaciones

El CSS se utiliza para cambiar el aspecto de la superposición. En esta muestra, el CSS utilizado es:

/* override default styles for overlay */
.video-js .vjs-overlay {
    width: 100%;
    height: 20%;
    color: #000;
    background-color: rgba(255, 255, 255, 0.8);
    left: 0;
    top: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    margin-top: 10%;
    padding-left: 0;
}

Debe modificar el CSS para definir el aspecto deseado y luego guardar el CSS en una ubicación accesible en Internet. Apuntará a este CSS en la configuración del complemento.

Configuración de reproductor/HTML

En esta sección se detalla cualquier configuración especial necesaria durante la creación del reproductor. Además, se describen otros elementos HTML que deben agregarse a la página, más allá del código de implementación del reproductor de incrustación de la página.

Configuración del reproductor

En este caso, agregará el complemento de superposición de pantalla mediante Studio.

  1. Abre el JUGADORES módulo y cree un nuevo reproductor o localice el reproductor al que desea agregar el complemento.
  2. Haz clic en el enlace del reproductor para abrir las propiedades del reproductor.
  3. Haz clic en Plugins en el menú de navegación izquierdo.
  4. A continuación, haz clic en Agregar un plugin.
  5. Para el nombre del complemento, introduzca overlay.
  6. Para el JavaScript URL, ingrese: 
    https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js
  7. Para el CSS URL, ingrese: 
    https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css
  8. Ingrese las opciones de configuración en el Opciones (JSON) caja de texto. 
    {
  "content": "<strong>Default overlay content</strong>",
  "overlays": [
    {
      "content": "<a href='http://www.brightcove.com'><span style='font-size:large'><strong>Brightcove Homepage</strong></span></a>",
      "start": "ended",
      "end": "play"
    }
  ]
}
  9. Haz clic en Guardar.
  10. Para publicar el reproductor, haga clic en Publicar e insertar > Publicar cambios.
  11. Para cerrar el cuadro de diálogo abierto, haga clic en Cerrar.

Otros HTML

No se añaden otros elementos HTML a la página.