Muestra de Brightcove Player: Control de volumen horizontal
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.
Seleccionar implementación
En este ejemplo, probará con el código de inserción In-Page y luego agregará los archivos CSS y JavaScript al reproductor. Luego, implementará el complemento. Con el complemento de volumen horizontal agregado al reproductor, puede usar la implementación de iframe.
Recursos de API utilizados
Las siguientes secciones detallan los recursos que se utilizan en varias API.
Métodos de la API de Brightcove Player
control_bar.addChild()
control_bar.removeChild()
El jugador
En el reproductor de abajo, observe que la barra de control de volumen horizontal reemplaza la barra de control vertical predeterminada.
Cómo funciona
Las siguientes secciones explican el reproductor, JavaScript y código CSS que se utilizan en el ejemplo.
Crea el reproductor
Para crear un reproductor y asignarle un vídeo, siga estos pasos:
- En el Jugadores módulo, cree un nuevo reproductor o utilice uno existente.
- En el Medios de comunicación módulo, seleccione un video y publíquelo con este reproductor.Asigne contenido de video al reproductor y publíquelo.
- Copie el código de incrustación en la página y péguelo en un nuevo archivo HTML.
El código del jugador
Su código de inserción In-Page debería tener un aspecto similar a esto:
<video-js id="video_1"
width="640px" height="360px"
data-video-id="4172255216001"
data-account="1752604059001"
data-player="default"
data-embed="default"
controls=""></video-js>
<script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>
La hoja de estilo
Este ejemplo utiliza estilos CSS para Brightcove Player.
-
Líneas 9-22: Establezca el orden de los elementos en la barra de control. Este ejemplo coloca el control de silencio y el control de volumen después de la barra de progreso, pero antes del botón de pantalla completa.
Para obtener más detalles sobre cómo configurar el orden de los iconos de la barra de control, consulte la Personalizar la apariencia del jugador documento.
- Líneas 24-26: Elimine la sombra predeterminada alrededor del control de volumen para que coincida mejor con la barra de progreso.
- Líneas 27-34: Establezca la altura y el color de fondo para el control de volumen.
- Líneas 36-38: Agregue relleno a la derecha del control de volumen para asegurarse de que no se superponga con el botón de pantalla completa.
<style type="text/css">
/* Order of controls in bar, should flow in before fullscreen button. */
.vjs-mute-control {
order: 7;
-webkit-box-ordinal-group: 7;
-moz-box-ordinal-group: 7;
-webkit-order: 7;
-ms-flex-order: 7;
}
.vjs-volume-control {
order: 8;
-webkit-box-ordinal-group: 8;
-moz-box-ordinal-group: 8;
-webkit-order: 8;
-ms-flex-order: 8;
}
/* Better match progress bar */
.video-js.video-js .vjs-volume-bar:before {
box-shadow:none;
}
.video-js.video-js .vjs-volume-bar,
.video-js.video-js .vjs-volume-bar:before,
.video-js.video-js .vjs-volume-level {
height: 4px;
}
.video-js.video-js .vjs-volume-handle {
background-color: initial;
}
/* Additional padding to reduce inadvertently covering the fullscreen button */
.vjs-volume-control {
padding-right: 5px;
}
</style>
El código JavaScript
Agregue el siguiente JavaScript al código de su página.
- Línea 57: Obtiene una referencia al reproductor cuando está listo.
- Línea 59: Obtiene una referencia a la barra de control del jugador.
- Línea 60: Obtiene una referencia al botón del menú de volumen.
-
Líneas 61-62: Agregue el botón de silencio y los elementos de control de volumen a la barra de control.
- Línea 63: Elimina el botón de menú de volumen predeterminado de la barra de control.
<script id="pageScript" type="text/javascript">
var myPlayer;
videojs.getPlayer('video_1').ready(function(){
myPlayer = this;
var control_bar = myPlayer.controlBar;
var vmb = control_bar.volumeMenuButton;
control_bar.addChild('VolumeControl');
control_bar.addChild('MuteToggle');
control_bar.removeChild(vmb);
});
</script>
Usa un complemento
Es una buena práctica utilizar un complemento para que pueda agregar fácilmente esta funcionalidad a varios jugadores.
Crea el archivo CSS
Mueva los estilos CSS a un archivo y colóquelo en una URL accesible desde Internet.
- Crea un nuevo archivo para tus estilos CSS. En este caso, asígnele el nombre
horizontal-volume.css
. - En el
<head>
sección de su archivo HTML, agregue el siguiente enlace para incluir su archivo CSS recién creado.<link href="horizontal-volume.css" rel="stylesheet">
- Navega por la página HTML. Debería ver el control de volumen horizontal, excepto que ahora sus estilos se han eliminado de la página HTML.
Crea el archivo JavaScript
Mueva el código JavaScript del complemento a un archivo y colóquelo en una URL accesible desde Internet.
- Cree un nuevo archivo para el código JavaScript de su complemento. En este caso, asígnele el nombre
horizontal-volume.js
. - Corte y pegue el código JavaScript de su archivo HTML principal en este nuevo archivo.
- Líneas 77,85: Envuelva su código JavaScript usando el
videojs.registerPlugin()
función. El primer argumento,horizontalVolume
, es el nombre del complemento. - Línea 78: Obtiene una referencia a tu reproductor.
- El resto es su código JavaScript que se revisó en una sección anterior.
/**
* Horizontal Volume
*/
videojs.registerPlugin('horizontalVolume', function() {
var myPlayer = this,
control_bar = myPlayer.controlBar,
vmb = control_bar.volumeMenuButton;
control_bar.addChild('VolumeControl');
control_bar.addChild('MuteToggle');
control_bar.removeChild(vmb);
});
- En el archivo HTML, añade el siguiente código justo debajo de las
<script>
etiquetas existentes. Este código incluye el archivo JavaScript y luego llama al método definido en ese JavaScript.<script type="text/javascript" src="horizontal-volume.js"></script> <script>videojs.getPlayer('video_1').horizontalVolume();</script>
- Navega por la página HTML. Debería ver el control de volumen horizontal, excepto que ahora su código JavaScript se ha eliminado de la página HTML.
Implementar complemento y CSS
Para implementar el complemento de botón de superposición utilizando el módulo de reproductores, siga estos pasos:
- En el nuevo Video Cloud Studio, abra el Jugadores módulo y localice el reproductor.
- Haga clic en el enlace del reproductor para abrir las propiedades del reproductor.
- Localizar el Complementos sección y haga clic en Editar.
- Para el URL de JavaScript , ingrese la URL que especifica la ubicación donde guardó el JavaScript de su complemento.
- Para el URL CSS , ingrese la URL que especifica la ubicación donde guardó el CSS de su complemento.
- Para el Nombre , ingresar horizontalVolume.
- Este complemento no tiene opciones, por lo que puede dejar la sección de opciones del complemento en blanco.
- Haz clic en Guardar y, a continuación, Publicar el reproductor.
Usar iframe
Es una buena práctica utilizar la implementación del reproductor iframe. Si es posible para este ejemplo, reemplace la implementación de inserción en la página con la implementación de iframe.
- En el Medios de comunicación módulo, seleccione un video y publíquelo con este reproductor.Volver a la Jugadores módulo.
-
Copie el código de inserción del iframe y péguelo en un nuevo archivo HTML. El código debería tener un aspecto similar a este:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Brightcove Player: Horizontal Volume - iframe</title> </head> <body> <iframe style='width: 640px;height: 360px;' src='//players.brightcove.net/1752604059001/b42edc12-2ac9-48a9-92bc-fbdb5ca9aed7_default/index.html?videoId=4172255216001' allowfullscreen allow='encrypted-media'></iframe> </body> </html>
- Navega por la página HTML. Debería ver que el complemento funciona correctamente.