Muestra de Brightcove Player: Deshabilitar el depuración hacia adelante

Ejemplo de jugador

Inicialmente, NO podrá desplazarse hacia adelante, pero es posible hacerlo hacia atrás. Una vez que el video alcanza el 50% de reproducción, puede desplazarse hacia adelante o hacia atrás. El porcentaje de cuándo permitir la limpieza hacia adelante se establece fácilmente en el código.

Ver la pluma Desactivar fregado hacia adelante 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 middleware en la página con el reproductor en una script etiqueta o incluya la función middleware utilizando el src atributo con un script etiqueta. Ambas implementaciones se mostrarán en este documento.
3. Registre la función middleware con el reproductor utilizando el use() método, como se muestra a continuación:

   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 disableForwardScrubbing.
• Implementar el requerido setSource() método.
• Alterar el setCurrentTime() método para comprobar si el tiempo al que el espectador está intentando realizar un scrub es menor que el tiempo actual en el reproductor, o si ha pasado el porcentaje de scrub forward. Si alguno de los dos es cierto, mueva el cabezal de reproducción a ese momento. Si es falso, mantenga el video reproduciéndose a la hora actual.

Crear el esqueleto para la función middleware

Busque el código etiquetado:

// +++ Define the middleware function+++

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

var disableForwardScrubbing = function(player) {
  return {
  ...
};

Tenga en cuenta que el player objeto se pasa a la función.

Implementar el setSource() método

Busque el código etiquetado:

// ### Implement setSource() ###

Este es un método obligatorio para cada función de middleware. Utilizando la sintaxis mostrada significa que el middleware siempre estará seleccionado, independientemente del tipo de vídeo:

setSource: function setSource(srcObj, next) {
  next(null, srcObj);
},

Modifique el método setCurrentTime ()

Busque el código etiquetado:

// ### Alter the 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 ct El valor pasado a la función refleja el valor al que el espectador está depurando. La if La declaración verifica si el nuevo valor es menor que el tiempo actual del jugador o excede el porcentaje para permitir la limpieza hacia adelante. Si alguno de los dos es verdadero, se devuelve el nuevo valor, lo que hace que la cabeza lectora se mueva al nuevo valor. Si la condición es falsa, lo que significa que el espectador está intentando desplazarse hacia adelante antes de que se le permita, se devuelve la hora actual del jugador y la reproducción no se modifica.

setCurrentTime: function setCurrentTime(ct) {
  var percentAllowForward = 50,
   // Determine percentage of video played
   percentPlayed = player.currentTime() / player.duration() * 100;
   // Check if the time scrubbed to is less than the current time
   // or if passed scrub forward percentage
  if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
    // If true, move playhead to desired time
    return ct;
  }
  // If time scrubbed to is past current time and not passed percentage
  // leave playhead at current time
  return player.currentTime();
}

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"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script type="text/javascript">
  // +++ Define the middleware function+++
  var disableForwardScrubbing = function(player) {
    return {
      // +++ Implement setSource() +++
      setSource: function setSource(srcObj, next) {
        next(null, srcObj);
      },
      // +++ Alter the setCurrentTime method +++
      setCurrentTime: function setCurrentTime(ct) {
        var percentAllowForward = 50,
         // Determine percentage of video played
         percentPlayed = player.currentTime() / player.duration() * 100;
         // Check if the time scrubbed to is less than the current time
         // or if passed scrub forward percentage
        if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
          // If true, move playhead to desired time
          return ct;
        }
        // If time scrubbed to is past current time and not passed percentage
        // leave playhead at current time
        return player.currentTime();
      }
    }
  };

  // Register the middleware with the player
  videojs.use('*', disableForwardScrubbing);

</script>

Código incluido en la página del jugador

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

<video-js id="myPlayerID"
  data-video-id="5701202551001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script src="disable-forward-scrubbing.js"></script>

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