Muestra de Brightcove Player: Tiempo de búsqueda

Ejemplo de jugador

Al hacer clic en la barra de búsqueda, verá las horas en las que hizo clic debajo del reproductor.

Ver la pluma Obtener tiempo buscado por Brightcove Learning Services ( rcrooks1969 ) en CodePen.

Código fuente

Ver el solución completa en GitHub.

Funciones de middleware

En este ejemplo se utiliza middleware Video.js para implementar la solución de código. En un nivel muy alto, los casos de uso en los que el middleware es de mayor valor es cuando desea interceptar y alterar los comportamientos principales del reproductor, como establecer la fuente o la hora actual. El middleware Video.js en general no se analiza extensamente en este documento, pero se explica el código real utilizado para la función middleware. Aquí hay documentos de fuentes Video.js que detallan el middleware:

• Middleware (del conjunto de documentación Video.js)
• Característica Spotlight: Middleware (del blog Video.js)
• videojs-playbackrate-adjuster (una aplicación de ejemplo)

Implementación de funciones de middleware con Brightcove Player

La forma más sencilla de utilizar una función middleware es:

1. Escribe la función middleware.
2. Coloque la función de middleware en la página con el reproductor en un texto etiqueta, o incluir la función de middleware usando la src atributo con un texto etiqueta. Ambas implementaciones se mostrarán en este documento.
3. Registre la función de middleware con el reproductor utilizando el usar() método, como se muestra aquí:

   videojs.use ('mimeType', functionName);

   Para el tipo mime, puede utilizar un tipo mime de vídeo estándar, como video/mp4, o usar un * si desea que la función middleware actúe sobre todos mimetipos.

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 ninguna configuración especial para el reproductor de Brightcove que crea para este ejemplo.

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:

• Implementar la sintaxis básica para una función de middleware, nombrar la función getSeekedTime.
• Alterar el setCurrentTime () método para simplemente devolver el tiempo buscado.

Crear el esqueleto para la función middleware

Busque el código etiquetado:

// +++ Definir la función de middleware +++

La sintaxis básica para crear una función middleware es la siguiente:

var getSeekedTime = function (player) {
  regreso {
  ...
};

Modifique el método setCurrentTime ()

Busque el código etiquetado:

// ### Set seek time in setCurrentTime method ###

Este bloque de código es donde el real setCurrentTime () el método está alterado. Para entender esto, el primer punto a saber es que el Connecticut El valor pasado a la función refleja el valor al que el espectador está depurando. Por lo tanto, puede simplemente asignar el valor a la variable apropiada y devolver este valor para setCurrentTime () todavía funciona correctamente.

setCurrentTime: function setCurrentTime (ct) {
  seekBarClickedTime = ct;
  return ct;
}

Estilismo de aplicaciones

El CSS de la página simplemente establece el tamaño del reproductor.

Uso de la función middleware

Una vez que se haya escrito la función middleware, desea usarla. Antes se mencionaron dos formas y se detallarán ahora.

Código en la misma página que el reproductor

Aquí defines la función middleware en la misma página que el reproductor y luego la registras.

<video-js id="myPlayerID"
  data-video-id = "5701202551001"
  cuenta-datos = "1752604059001"
  data-player = "predeterminado"
  data-embed = "predeterminado"
  data-application-id=""
  controles=&quot;&quot;>< /video-js>

<div id = "displayTimesHere"> </div>

<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script type = "text / javascript">
  var seekBarClickedTime;

  // +++ Definir la función de middleware +++
  var getSeekedTime = function (player) {
    regreso {
    // +++ Establecer el tiempo de búsqueda en el método setCurrentTime +++
      setCurrentTime: function setCurrentTime (ct) {
        seekBarClickedTime = ct;
        return ct;
      }
    }
  };

  // Registrar el middleware con el reproductor
  videojs.use ('*', getSeekedTime);

  // Inicializar el evento mouseup en la barra de búsqueda
  videojs.getPlayer ('myPlayerID'). ready (function () {
    var myPlayer = this;
    myPlayer.controlBar.progressControl.seekBar.on ('mouseup', function (event) {
      displayTimesHere.innerHTML + = seekBarClickedTime + '<br>';
    });
  });
  </script>

Código incluido en la página del jugador

En el siguiente código, JavaScript para la función de middleware y el usar() El método para registrarlo simplemente se incluye en la página.

<video-js id="myPlayerID"
  data-video-id = "5701202551001"
  cuenta-datos = "1752604059001"
  data-player = "predeterminado"
  data-embed = "predeterminado"
  data-application-id=""
  controles=&quot;&quot;>< /video>
<script src = "https://players.brightcove.net/1752604059001/default_default/index.min.js"> </script>

<script src = "get-seeked-time.js"> </script>

Ver el función-en-archivo-separado en el repositorio de GitHub para obtener el código completo.