Muestra de Brightcove Player: Control de volumen vertical

Ejemplo de jugador

Inicia la reproducción de vídeo y mueve el ratón sobre el botón de volumen de la barra de control. Debería ver un control deslizante de volumen vertical en lugar del control deslizante horizontal predeterminado.

Ver la pluma volumen vertical por Brightcove Learning Services ( bcls1969 ) en CodePen.

Código fuente

Ver el solución completa en GitHub.

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.

secuencia de desarrollo

Esta es la secuencia de desarrollo recomendada:

Utilice la implementación del reproductor de incrustación en la página para probar la funcionalidad de su reproductor, complemento y CSS (si es necesario CSS)
Coloque el JavaScript y CSS del plugin en archivos separados para pruebas locales
Implementa el código del plugin y CSS en tu servidor una vez que hayas resuelto cualquier error.
Usa Studio para agregar el plugin y CSS a tu reproductor
Reemplace la implementación del reproductor de incrustación en página si determina que la implementación de iframe se ajusta mejor (se detalla en la siguiente sección)

Para obtener más información sobre estos pasos, consulte la sección Paso a paso: Guía de desarrollo de plugins.

iframe o incrustación en página

Al desarrollar mejoras para Brightcove Player, deberás decidir si el código se ajusta mejor a la implementación de iframe o incrustación en la página. La recomendación de práctica recomendada es crear un complemento para usarlo con una implementación de iframe. Las ventajas de utilizar el reproductor iframe son:

Sin colisiones con JavaScript y/o CSS existentes
Responde automáticamente
El iframe facilita el uso en aplicaciones de redes sociales (o siempre que el vídeo tenga que «viajar» a otras aplicaciones)

Aunque la integración del reproductor de incrustación en la página puede ser más compleja, hay ocasiones en que planificará el código en torno a esa implementación. Para generalizar, este enfoque es mejor cuando la página que contiene necesita comunicarse con el reproductor. En concreto, estos son algunos ejemplos:

El código de la página que contiene necesita escuchar y actuar en función de los eventos de los jugadores
El reproductor utiliza estilos de la página que lo contiene
El iframe hará que la lógica de la aplicación falle, como un redireccionamiento desde la página que contiene

Incluso si tu implementación final no utiliza el código iframe, puedes seguir usando el código de incrustación en la página con un plugin para tu JavaScript y un archivo separado para tu CSS. Esto encapsula tu lógica para que puedas utilizarla fácilmente en varios reproductores.

Recursos de API/plugins utilizados

Métodos API
método bc ()

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

Debido a que queremos modificar la barra de control antes de que se cree el reproductor, retrasaremos la creación de instancias del Brightcove Player eliminando algunos de los atributos del <video> etiqueta. Para obtener más información sobre esto, consulte la Retrasar la instanciación del jugador documento.

Modifique el código de inserción de su reproductor de la siguiente manera:

Añade el id atribuir a la video etiqueta en el código de inserción del reproductor
Elimine los siguientes atributos de la video etiqueta:
- data-account
- data-player
- data-video-id

El código de inserción de su reproductor ahora debería verse similar a esto:

<video-js id="myPlayerID"
  data-embed="default"
  data-application-id
  width="640" height="360"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

Flujo de aplicaciones

La lógica básica detrás de esta aplicación es:

Definir las opciones del reproductor
Añadir los atributos de jugador
Crea el reproductor

Definir las opciones del reproductor

Busque el código etiquetado:

// +++ Define the player options +++

Definir el volumePanel de modo que sea vertical y no en línea con la barra de control.

Añadir los atributos de jugador

Busque el código etiquetado:

// +++ Add the player attributes +++

Agregue los siguientes atributos de jugador con sus valores al <video> etiqueta.

data-account
data-player
data-video-id

Crea el reproductor

Busque el código etiquetado:

// +++ Create the player +++

Cree una instancia del jugador pasando las opciones de la barra de control al método bc ().

Estilismo de aplicaciones

No hay estilos adicionales para este ejemplo.

Actualizar varios jugadores

Para actualizar todos los reproductores en su página HTML, puede usar un videojs.hook() función.

Funciones de gancho

Los Hooks le permiten agregar funcionalidad o cambiar la apariencia del reproductor en ciertos momentos del ciclo de vida de Video.js. Con una función de gancho, todos los reproductores en su página HTML se actualizan pasando las opciones del reproductor al videojs.hook() función.

Para obtener más detalles, consulte Documentación de ganchos de video.js.

Ejemplo de jugador

Esta muestra cambia el botón de control de volumen para mostrar un control deslizante de volumen vertical para todos los reproductores en la página.

Inicia la reproducción de vídeo y mueve el ratón sobre el botón de volumen de la barra de control. Debería ver un control deslizante de volumen vertical para ambos jugadores, en lugar del control deslizante horizontal predeterminado.

Ver la pluma Volumen vertical usando Hook por Brightcove Learning Services ( bcls1969 ) en CodePen.

Configuración del reproductor

Retrasará la creación de los reproductores en su página HTML, tal como lo hizo en el primer ejemplo en este documento.

Flujo de aplicaciones

La lógica básica detrás de esta aplicación es:

Definir la función de gancho con opciones de reproductor
Añadir los atributos de jugador
Ejecutar la función de gancho
Crea los jugadores

Definir la función de gancho con opciones de reproductor

Busque el código etiquetado:

// +++ Define the hook function with player options +++

Defina la función de gancho para el beforeSetup momento del ciclo de vida, que contiene las opciones del reproductor. Para las opciones del reproductor, configure el volumePanel para que aparezca vertical y no en línea con la barra de control.

Añadir los atributos de jugador

Busque el código etiquetado:

// +++ Add the player attributes +++

Agregue los siguientes atributos de jugador con sus valores al <video> etiqueta para cada jugador.

data-account
data-player
data-video-id

Ejecutar la función de gancho

Busque el código etiquetado:

// +++ Execute the hook function +++

Modifique las opciones pasadas a los jugadores, usando el beforeSetup momento del ciclo de vida con el Gancho de Video.js función.

Crea los jugadores

Busque el código etiquetado:

// +++ Create the players +++

Crea una instancia de cada jugador usando el método bc ().