Muestra de Brightcove Player: Detener otros reproductores en la página cuando se inicia un vídeo

En este tema, aprenderá cómo pausar todos los demás reproductores de Brightcove en una página cuando se inicia la reproducción de video en uno de los reproductores. La funcionalidad descrita en el documento requiere Brightcove Player versión 5.0.3 o posterior.

Ejemplo de jugador

Empiece a reproducir uno de los videos. A continuación, reproduzca el video en un reproductor diferente y observe que la reproducción de video se detiene en el otro reproductor que estaba reproduciendo.

Ver la pluma 18179-detener-la-página-de-otros-jugadores-cuando-comienza-el-video por Brightcove Learning Services ( rcrooks1969 ) 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

Normalmente, para las muestras, esta sección sugiere un enfoque para el desarrollo pasando de una página al uso de un complemento de Brightcove Player. En este caso, el código actúa sobre todos los reproductores de la página en conjunto y no se puede asignar a un jugador como complemento, por lo que no se muestra ningún código de complemento.

Recursos de API/plugins utilizados

Métodos API	Eventos API
jugar ()	jugar
pausa ()

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

No se requiere una configuración especial para Brightcove Player, pero hay tres reproductores distintos en la página dentro de HTML <div> etiquetas para control de diseño.

Otros HTML

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

Flujo de aplicaciones

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

Determina cuántos jugadores hay en la página.
Haga un bucle sobre los jugadores, inicializándolos como Brightcove Players y también estableciendo un play detector de eventos en cada uno.
Cada vez que un play se maneja el evento, recorre los jugadores y pausa a todos los jugadores que no tienen el nombre del jugador que envió el evento.

Crea un bucle sobre los jugadores y asigna un controlador de eventos a cada uno.

Busque el código etiquetado:

// ### Determine the available player IDs ###

Si tiene varios jugadores en una página, se almacenan en un nombre de objeto videojs.players con claves que son los nombres de los jugadores. Usas JavaScript Object.keys() método para extraer los nombres de los jugadores, que desea para el bucle, no los objetos reales del jugador. En el bucle, asigna un controlador de eventos y luego empuja al reproductor a una matriz.

Manejar el `play` evento y detener la reproducción de otro jugador