Preview en miniaturas de videos con Jquery

3 de Octubre - en JavaScript

En este tutorial vernos como añadir la función de previsualización en miniaturas de video, utilizando la librería de JavaScript Jquery, la cual nos facilitara el proceso.

Preview en videos con JavaScript

Partiremos utilizando el ejemplo anterior en el cual se mostraba como crear miniaturas de videos con la librería ffmpeg, realizando una modificación al script conseguiremos generar una tira de miniaturas horizontales, de la siguiente forma:

Preview en minituras de videos

Funcionamiento

Para realizar el efecto de previsualización,  se cambiar la imagen de la miniatura original por la tira de capturas, adaptándola para que solo sea visible una parte, cada X tiempo de intervalo la imagen se ira desplazando para mostrar una a una las miniaturas.

Previsualizacion de videos en Jquery

Estructura  HTML

La miniatura tendrá la siguiente estructura, en la cual la etiqueta img tendrá un atributo adicional, el cual llamáramos src-preview y que contendrá la url de la tira de miniaturas.

<a href="#" class="link">
	<div class="preview">
		<img src="poster.jpg" src-preview="preview.jpg">
		<div>02:30</div>
		<span>Caminandes: Llamigos</span>
	</div>
</a>

Código CSS:

.preview{
	width: 200px;
	height: 145px;
	border: 1px solid #bbbbbb;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	position: relative;
}
.preview img{
	width: 100%;
}
.preview div{
	background: rgba(0,0,0,0.5);
	border-radius: 2px;
	color: #fff;
	padding: 2px 4px;
	width: 40px;
	float: right;
	margin-top: -30px;
	position: relative;
}
.preview span{
	font-size: 15px;
	padding: 0 4px;
}
.link{
	text-decoration: none;
	color: #000000;
	display: inline-block;
}
.link:hover{
	color: #8c0000;
}

Para que la previsualización comience es necesario que el usuario posicione el mouse sobre la miniatura, para esto utilizaremos el evento hover, el cual se disparara en todos los elementos con la clase preview.  El efecto de desplazamiento se activara cada X tiempo y se modificara propiedad CSS margen-left.

Usando setInterval y clearInterval de JavaScript

La función setInterval llama a una función definida cada intervalo de tiempo regular, en este caso la función a llamar actualizara la posición de la imagen, desplazándola hacia la izquierda

Var intervalo = setInterval(función, tiempo);

Para detener a setInterval utilizaremos la función clearInterval para eliminar el llamado cíclico de la función.

clearInterval(intervalo);

Adicionalmente se utilizara una bandera que se activara cuando la imagen termine de cargarse correctamente, de este modo, la función que desplazara la imagen no se ejecutara hasta que esta este cargada.

Código JavaScript:

//Variables de control
var nm = 10;//Numero de minituras
var tb = 0;//incrementador
var intervalo;
var imgid;//Id de la imagen en preview
var imgw = 0;//Ancho de la imagen preview	
var imgposter;//Guarda la ruta de la imagen original
var imgl= false;//Bandera de imagen cargada
var binter = false;//Bandera de intervalo activado
	
//Evento que se dispara en el evento hover de elementos con la clase 'preview'
$(".preview").hover(function(){				
		//Id de la imagen
		//*** IMPORTANTE ***, adaptar si se modifica la estructura HTML de la minitura
		imgid = $(this).children('img');

		//Guardando la ruta de la imagen actual
		imgposter = $(imgid).attr("src");
			
		binter = true;//Bandera de intervalo activa
			
		//Url de la imagen preview
		url = $(imgid).attr("src-preview");			
			
		//Intervalo de tiempo cada 800ms
		intervalo = setInterval(function(){
			//Verificando que la bandera de carga de imagen este activa
			if(!imgl) return;	
			
			//Desplazando la imgen con propiedad margin-left
			$(imgid).css("margin-left", tb*(-imgw));
			
			//Incrementar y verificar el fragmento a monstrar
			if((tb++)==(nm-1)) tb=0;
		}, 800);			
		
		//Esperando a que la imagen se carge
		$(imgid).attr('src', url).load(function() { 
			if(binter){//Si el intervalo esta activo
				$(imgid).css("width", "auto");
				tb=1;//Reset incrementador				
				imgl = true;//Bandera de carga de imagen activa  
				imgw = $(imgid).width()/nm;
			}
		}).error(function () {
			//En caso de error al cargar la imagen de preview, reestableser
			imgl = false;
			clearInterval(intervalo);
			$(imgid).css("margin-left", 0);
			$(imgid).css("width", "100%");
			$(imgid).attr("src", imgposter);
		}); 
		
	//Mouse retirado de la miniatura
	}, function(){
		//Borrando el intervalo
		clearInterval(intervalo);
		
		//Desactivando la bandera de intervalo
		binter = false;
		
		//Reseteando los valores CSS y restaurando la miniatura
		$(imgid).css("margin-left", 0);
		$(imgid).css("width", "100%");
		$(imgid).attr("src", imgposter);
	}
);

Ejemplo

DemoDescargar
Compartir