En esta muestra, verá después de un período de tiempo establecido, se muestra un mensaje superpuesto. Esta muestra mostrará la superposición en 6 segundos, pero el tiempo es configurable. Si el espectador hace clic en el mensaje dentro de un tiempo especificado, la reproducción continúa. Si no es así, el video está en pausa. Esta técnica es útil si tiene contenido de formato largo. Esto evitará que desperdicie ancho de banda en los espectadores que comienzan a reproducir un video y luego se van para hacer otra cosa sin molestarse en detenerlo.
Esta muestra utiliza un complemento Video.js de código abierto ubicado en https://github.com/TylerZubke/Videojs-AFK-Monitor. El código de muestra en este documento utilizará este complemento.
Ver la pluma ¿Sigues viendo? por Brightcove Learning Services ( rcrooks1969 ) en CodePen.
Ver el solución completa en GitHub.
Estos son algunos consejos para utilizar eficazmente el CodePen anterior:
Esta es la secuencia de desarrollo recomendada:
Para obtener más información sobre estos pasos, consulte la sección Paso a paso: Guía de desarrollo de plugins.
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:
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:
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.
| Métodos API | Eventos API | Complementos de Brightcove Player |
|---|---|---|
| addClass () | usuario activo | Complemento de superposición |
| Eliminar clase () | usuario inactivo | |
| pausa () | ||
| Hora actual () | ||
| uno () | ||
| sobre() | ||
| setTimeout () | ||
| hasClass () | ||
| duración () | ||
| pausado () | ||
| clearTimeout () | ||
| ha empezado() | ||
| el () |
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.
No se requiere ninguna configuración especial para el reproductor de Brightcove que crea para este ejemplo.
Se incluyen los archivos CSS y JavaScript del complemento de terceros.
La lógica básica detrás de esta aplicación es:
useractive y userinactive los eventos se miran para realizar un seguimiento del tiempo.El complemento se llama utilizando las mejores prácticas, como se muestra aquí
<script>
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
var options = {'showMessageAfter': 1000, 'pausePlayerAfter': 1000};
myPlayer.AFKMonitor(options);
});
</script>
Se pueden utilizar varias opciones para personalizar el complemento. Algunos detalles son:
showMessageAfter (en milisegundos) determina el tiempo antes de que se muestre el botón.
pausePlayerAfter (en milisegundos) las opciones también son útiles. Este es el momento en que permite que el usuario haga clic en el botón antes de que el reproductor se detenga. Esto le da al usuario la oportunidad de hacer clic en el botón sin interrumpir la reproducción de video.El CSS es parte del complemento de terceros.
Querrá clonar el repositorio para acceder al código y luego colocarlo en una ubicación accesible en Internet para su uso.
Como se mencionó anteriormente, puede ver el código JavaScript del complemento en el repositorio de GitHub correspondiente de este documento: videojs.afk-monitor.js.
Una vez que tengas los archivos CSS y JavaScript del plugin almacenados en una ubicación accesible a Internet, puedes usar el plugin con un reproductor. En Studio's JUGADORES módulo puedes elegir un jugador, luego en el PLUGINS sección agregue las URL a los archivos CSS y JavaScript, y también agregue el Nombre y Opciones , si se necesitan opciones.