Contenido del Articulo
Reproductor VideoJS: entrega simplificada
Este documento explica los pasos necesarios para reproducir anuncios en VideoJS usando
Paquete IMA
Se deben agregar tres scripts y un enlace CSS al sitio de los editores:
El enlace CSS son todos los archivos de estilo desarrollados para el reproductor de video. Sigue siendo
El archivo IMA Sdk de Google y luego los scripts generales se expandieron en uno
un archivo que debe cargarse antes de ejecutar el código principal de VideoJS. Global
una variable inicialmente declarada falsa en el archivo de script asegura que el VideoJS especificado
el código se ejecuta después de que se cargan los scripts generales.
La variable global se establece en “verdadero” al final del archivo de secuencia de comandos general. En este momento
el segundo script comienza a ejecutarse, asegurándose de que se dejen todos los códigos de biblioteca necesarios
hecho antes que él.
window.all_scripts = false; // se establece en falso cuando se ejecutan bibliotecas generales. // fin de console.log (“todos los scripts cargados ..”, all_scripts); window.all_scripts = true
En el archivo video.js, la función “allScripts” comprueba que window.all_scripts para
verdadero para que el reproductor videoJS comience a ejecutarse. Implementación mostrada
debajo.
Inyección de fuente de video.
Para mantener la opción de inyección de contenido de video desde el lado del script, verifique la fuente y
La inyección se utiliza para la etiqueta de video. El siguiente fragmento de código muestra la implementación
para comprobar la fuente y la inyección.
videoelement toma una etiqueta de video y sourceCheck verifica la presencia
etiquetas de origen dentro de una etiqueta de video. Función de longitud aplicada a la verificación de la fuente
La variable devuelve el número de etiquetas de origen dentro de la etiqueta de video, si no está allí
va a la condición else e inyecta la etiqueta fuente. Crea un elemento fuente
le da un tipo de video / mp4 y luego inserta una fuente de contenido (que se puede personalizar)
en cualquier momento). Una vez creada y definida, la etiqueta de origen se adjunta a la etiqueta de video en la página.
sitio web del editor.
Rendimiento principal de VideoJS.
La función videoStart () primero inicializa el reproductor videoJS pasando video
div id a él, establece las opciones del reproductor (adTagUrl, id del jugador, etc.) y las pasa
a la función player.ima.
AdTagUrl acepta un bloque de anuncios para anuncios de video que se pueden personalizar por
un sitio que usa scripts, simplemente reemplazando la etiqueta por una nueva específica para
cada sitio web.
Antes de eso, se agrega el evento player.ready, que configura el reproductor para que se reproduzca automáticamente de una vez por todas
los componentes están listos. Otros eventos opcionales como ads-ad-started, adend,
adsready, se puede agregar para llamar a métodos específicos en cada evento. Como agregar
superposición en adsready y eliminándolo encima.
Falta JQuery.
El objetivo es eliminar todos los códigos jQuery del archivo de secuencia de comandos. Había 2 funciones
usando jQuery básicamente para diseñar la superposición y eliminar el estilo cuando
se quita la superposición. Las funciones son piaelPipS () para agregar una superposición y
removepip () para eliminarlo. El siguiente código muestra dos funciones en puro
javascript con códigos jQuery comentados que representan la contraparte de javascript puro
para jQuery.
Póster al final del contenido
La idea es hacer que el reproductor sea interactivo agregando un modal al final del contenido del video.
en lugar de mostrar una pantalla en blanco. El modal representa el logotipo del sitio web (para el cual
video), 2 botones e íconos “Reproducir de nuevo” (reproducir nuevamente) o “Visitar sitio” (para visitar
sitio web). La pantalla modal se muestra a continuación.
La función modal se llama cuando finaliza el contenido del video y se inserta en el póster como
mostrado anteriormente. La función call_to_modal () crea el elemento poster i
realiza funciones relacionadas. La implementación de la función se muestra en la siguiente.
lado.
Archivos adjuntos.
video.js
Notas importantes:
- Asegúrese de que todas las bibliotecas generales estén cargadas antes de la ejecución principal de videoJS.
- La función videoStart () inicia la ejecución del reproductor videoJS, así que colóquelo después de que se hayan realizado todas las comprobaciones para iniciar la ejecución desde ese punto.
