Muestra de Brightcove Player: Control de volumen horizontal

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.

1. Crea un nuevo archivo para tus estilos CSS. En este caso, asígnele el nombre horizontal-volume.css.
2. 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"> 

3. 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);
});

1. 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>

2. 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:

1. En el nuevo Video Cloud Studio, abra el Jugadores módulo y localice el reproductor.
2. Haga clic en el enlace del reproductor para abrir las propiedades del reproductor.
3. Localizar el Complementos sección y haga clic en Editar.
4. Para el URL de JavaScript , ingrese la URL que especifica la ubicación donde guardó el JavaScript de su complemento.
5. Para el URL CSS , ingrese la URL que especifica la ubicación donde guardó el CSS de su complemento.
6. Para el Nombre , ingresar horizontalVolume.
7. Este complemento no tiene opciones, por lo que puede dejar la sección de opciones del complemento en blanco.
8. 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.

1. En el Medios de comunicación módulo, seleccione un video y publíquelo con este reproductor.Volver a la Jugadores módulo.

2. 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>

3. Navega por la página HTML. Debería ver que el complemento funciona correctamente.