Como crear un Plugin para VideoJS

3 de Octubre - en JavaScript

VideoJS es un reproductor de video compatible con HTLM5 y de código abierto, es ampliamente utilizado dado las múltiples funciones que ofrece, así como la opción de personalizar e integrar nuestras propias funciones haciendo uso de Plugins o Complementos. En este tutorial veremos como crear un complemento, partiendo de su estructura básica y un ejemplo funcional.

Estructura básica de un complemento la dividiremos en 3 partes:

  • Creación
  • Registro
  • Llamada

Creación

Definiremos una función la cual contendrá el constructor de nuestro complemento, así como todas las variables y eventos que utilizaremos en tiempo de ejecución.

Las variables que definamos dentro de esta función, serán accesibles en tiempo de ejecución. El evento ready(), el cual se ejecuta una vez que el VIdeoJS esté listo, es donde llamaremos a la función “Crear()”  la cual construirá la parte gráfica.

//Declararemos la función como expreción para utilizarla como parametro
var myplugin = function(options) {
		
	//Variables declaradas que estaran disponibles durante la ejecucion de VideoJS
	var player = this;
		
	//Definimos una funcion la cual contendra el contrucctor inicial de nuestro complemento
	function Crear() {
		//Creando la estructura de nuestro plugin
	}
		
	//Evento que se ejecuta una vez que el reproductor termina de construirse
	player.ready(function() {		
		Crear();//llamamos a la funcion Crear()	
	});		
	return this;
};

Registro

Para poder integrar nuestro complemento, VideoJS dispone de una función para registrarlo, usaremos registerPlugin(), la cual recibe 2 parámetros

  • Nombre del Plugin
  • Función con el constructor y variables

El nombre deberá de ser único, ya que con este lo invocaremos posteriormente.

videojs.registerPlugin('myplugin', myplugin);

Uso de IIFE para encapsular el código

Para finalizar haremos uso de la IIFE (Función invocada inmediatamente) para envolver nuestro código, de este modo evitaremos las posibles colisines de nombres de variables, además de hacer privadas nuestras funciones y variables, la estructura básica es:

(function(){
  //Codigo del plugin
}());

En resumen la IIFE, es una función anónima (sin nombre), la cual se auto-llama una vez que es creada, a su vez al ser una función los datos no serán accesibles desde el exterior.

Nuestra plantilla quedara de la siguiente manera:

(function(){ 	
	//Declararemos la función como expreción para utilizarla como parametro
	var myplugin = function(options) {
		
		//Variables declaradas que estaran disponibles en tiempo de ejecución
		var player = this;
		
		//Definimos una funcion la cual contendra el contrucctor inicial de nuestro complemento
		function Crear() {
			//Creando la estructura de nuestro plugin
		}		
		
		//Evento que se ejecuta una vez que el reproductor termina de construirse
		player.ready(function() {
			//llamamos a la funcion Crear()
			Crear();		
		});
		return this;
	};	
	
	//Uso de registerPlugin para registrar nuestro Plugin (Disponible en VideoJS +6.x)
	videojs.registerPlugin('myplugin', myplugin);
}());

Llamada

Para ejecutar nuestro plugin primero debemos obtener el identificador de la instancia actual de VideoJS utilizaremos la función videojs(id), asignado a una variable, de este modo podremos llamar y pasar los parámetros requeridos.

//Instancia actual de VideoJS
var video = videojs('video');

//Inicializando el plugin y pasando los paramtros requeridos
video.devlaz({
	img: 'logo.png' ,
	titulo: 'Titulo del video'
});	

 

Ejemplo de complemento

Para finalizar la explicación, crearemos un plugin como ejemplo, el cual mostrara el título del video, además de un logo, dichos datos los pasaremos como parámetros, para mayor funcionalidad haremos que estos aparezcan y desaparezcan junto con la barra de controles.

Insertando elementos dentro del reproductor

La parte grafica tendrá la siguiente estructura, la cual será creada mediante código JavaScript:

HTLM:

<div class="contenedor">
    <img src="...">
    <h1>Titulo del video</h1>
</div>

Nota: El código CSS está disponible en el ejemplo de descarga al final de tutorial.

 Usaremos la función appendChild para insertar los elementos <img> y <h1> dentro de nuestro contenedor creado con JavaScript, además de definir sus propiedades.

//Definimos el <DIV> que contendra los elementos
var contenedor = document.createElement("div");
	contenedor.className = "contenedor";
	
//Insertando IMG
var logo = document.createElement("img");
	//Asignando la URL del la imagen.
	logo.src = ops.img;
	//Uso de appendChild() para isnertar los elementos dentro del contenedor
	contenedor.appendChild(logo);
			
//H1 que contendra el titulo
var titulo = document.createElement("h1");
	//Asignando el valor de titulo
	titulo.innerHTML = ops.titulo;
	contenedor.appendChild(titulo);

Ahora solo queda insertar el contenedor dentro del reproductor, en este caso queremos que este en una posición especifica en la estructura HTML del reproductor, en la siguiente lista se muestra una vista general del orden de los elementos por defecto, cada una de estos representa un objeto heredado de VideoJS:

Player
    PosterImage
    TextTrackDisplay
    LoadingSpinner
    BigPlayButton
    ControlBar
        ...
    ErrorDisplay
    TextTrackSettings

 En este caso queremos insertar nuestro contenedor antes del elemento ControlBar, para esto usaremos el método el() de la clase component, el cual retorna su elemento DOM. Finalmente lo insertaremos con la función insertBefore().

Anteriormente definimos la variable player, la cual hacer referencia a la instancia actual de VideoJS.

player.el().insertBefore(contenedor, player.controlBar.el());

Uso de eventos en VideoJS

Los eventos son funciones que son llamadas cuando ocurre cierta acción, VideoJS dispone de una lista muy util, la sintaxis para utilizarlos es la siguiente:

instancia.on(evento, function() {
    //Codigo
});  

Algunos de los eventos más utilices:

  • play: El video escomenzó a reproducir
  • pause: El video fue pausado
  • ended: El video termino de reproducirse
  • error: Ocurrió un error
  • loadedmetadata: Los metadatos de del video fueron cargados (duración, dimensiones, etc.).
  • useractive: El usuario a realizado alguna acción, como mover el mouse
  • userinactive: El usuario está inactivo.
  • volumechange: Hubo un cambio en el volumen.

Para extender el ejemplo actual, añadiremos un texto en pantalla el cual mostrara el estado actual del reproductor, cuando se reproduzca, pause y finalice el video. La parte grafica constara de un elemento <h2>. Los eventos que utilizaremos serán play, pause, ended, en los cuales se actualizara el contenido de nuestra etiqueta H2 con el mensaje correspondiente:

player.on('play', function() {
	std.innerHTML = 'Reproduciendo';
});	
	
player.on('pause', function() {
	std.innerHTML = 'Pausa';
});	
		
player.on('ended', function() {
	std.innerHTML = 'El video finalizo';
});

Probando nuestro complemento

Finalmente solo nos queda llamar a nuestro complemento pasándole los parámetros correspondientes.

Codigo final:

(function() {	
var devlaz = function(options) {		
	//Valores por defecto
	var defaults = {
		img: '',
		titulo: ''
	};
	
	//Uso de mergeOptions para asignar valores por defecto a las variables nulas
	var ops = videojs.mergeOptions(defaults, options);		
	var player = this; //Instancia de VideoJS actual		
	var std;
	
	//Funcion que creara la parte grafica
	function Crear() {
		//Definimos el <DIV> que contendra los elementos
		var contenedor = document.createElement("div");
			contenedor.className = "contenedor";
			contenedor.id = "cnt";
		
		//Verificando que el parametro img no este vacio
		if(ops.img!=''){
		var logo = document.createElement("img");
			//Asignando la URL del la imagen.
			logo.src = ops.img;
			//Uso de appendChild() para isnertar los elementos dentro del contenedor
			contenedor.appendChild(logo);
		}			
		
		//H1 que contendra el titulo
		var titulo = document.createElement("h1");
			//Asignando el valor de titulo
			titulo.innerHTML = ops.titulo;
			contenedor.appendChild(titulo);
			
		//H2 que mostrara el estado actual
		var estado = document.createElement("h2");
			estado.innerHTML = 'Estado Inicial';
			std = estado;//Variable con la que accederemos posteriormente
			contenedor.appendChild(estado);
		
		//Utilizando insertBefore para insertar el contenedor antes de la barra de controles
		player.el().insertBefore(contenedor, player.controlBar.el());
	}		

	//Eventos que actualizaran el mensaje de estado
	player.on('play', function() {
		std.innerHTML = 'Reproduciendo';
	});	
	
	player.on('pause', function() {
		std.innerHTML = 'Pausa';
	});	
		
	player.on('ended', function() {
		std.innerHTML = 'El video finalizo';
	});
		
	//Llamada a la funcion crear cuando VideoJS  termine de construirse
	player.ready(function() {			
		Crear();		
	});
	return this;
};	
	//Registrando el plugin con el nombre devlaz
	videojs.registerPlugin('devlaz', devlaz);
}());


//Instancia actual de VideoJS
var video = videojs('video');
//Inicializando el plugin y pasando los paramtros requeridos
video.devlaz({
	img: 'logo.png' ,
	titulo: 'Titulo del video'
});	

Ejemplo

DemoDescargar
Etiquetas
JavaScript VideoJS
Compartir