Vista Previa de un Video de Youtube con jQuery

Nube Colectiva

hace 9 años

En esta página:

Demo Github

Demo Github

Cuando subimos un video a nuestro Canal de Youtube, el gestor de videos nos crea 3 pequeñas imágenes para elegir cual de ellas poner como miniatura para nuestro video.

Vamos a usar esas imágenes para representar una vista previa del contenido de nuestro video, para que nuestros usuarios puedan ver un adelante del video que van a ver.

Lo que haremos es que al colocar el puntero del mouse sobre la miniatura, este empiece a intercambiar escenas del video y al retirar el puntero del mouse que estaba sobre la miniatura, se detenga la vista previa. Bueno vamos con el tutorial:

Creamos el archivo llamado script.js en donde colocare mi función javascript que hace una vista previa del video.

Dentro de el archivo script.js coloco comentarios en donde explico para que sirve cada linea de código.

script.js


(function($) {

$.fn.PreViewTube = function(opts) {

//Defaults
var settings = $.extend({
'interval' : 500,
'mode' : 'hover'
}, opts);

//Iteramos sobre los elementos coincidentes
return this.each(function() {

var $this = $(this);

var loop;

// obtenemos la fuente de la imagen
var imgSrc = $this.attr("src");
// obtenemos el nombre del archivo
var fileName = imgSrc.match(/(\w*)\.jpg$/);

// obtenemos el numero de la imagen
if(fileName[1] == 'default') {
// Hacemos que por defecto el valor sea 1
var num = 1;
} else {
var num = parseInt(fileName[1]);
}

// Declaramos un loop
var infiniteLoop = null;

// Comprobamos el modo hover / constante
if(settings.mode == 'constant') {

loop = setInterval(function() {
// loop - 1, 2, 3
if(num == 3) {
num = 0;
} else {
num++;
}

$this.attr("src", imgSrc.replace(/(\d\.jpg|\w*\.jpg)$/, +num + '.jpg'));

}, settings.interval);

} else {// modo hover

$this.hover(function() {

loop = setInterval(function() {
// loop - 1, 2, 3
if(num == 3) {
num = 0;
} else {
num++;
}

$this.attr("src", imgSrc.replace(/(\d\.jpg|\w*\.jpg)$/, +num + '.jpg'));

}, settings.interval);

}, function() {
// Al retirarl el mouse
// Detenemos el loop
clearInterval(loop);

});
}

});
};
})(jQuery);

(function($) {

$.fn.PreViewTube = function(opts) {

//Defaults

var settings = $.extend({

'interval' : 500,

'mode' : 'hover'

}, opts);

//Iteramos sobre los elementos coincidentes

return this.each(function() {

var $this = $(this);

var loop;

// obtenemos la fuente de la imagen

var imgSrc = $this.attr("src");

// obtenemos el nombre del archivo

var fileName = imgSrc.match(/(\w*)\.jpg$/);

// obtenemos el numero de la imagen

if(fileName[1] == 'default') {

// Hacemos que por defecto el valor sea 1

var num = 1;

} else {

var num = parseInt(fileName[1]);

}

// Declaramos un loop

var infiniteLoop = null;

// Comprobamos el modo hover / constante

if(settings.mode == 'constant') {

loop = setInterval(function() {

// loop - 1, 2, 3

if(num == 3) {

num = 0;

} else {

num++;

}

$this.attr("src", imgSrc.replace(/(\d\.jpg|\w*\.jpg)$/, +num + '.jpg'));

}, settings.interval);

} else {// modo hover

$this.hover(function() {

loop = setInterval(function() {

// loop - 1, 2, 3

if(num == 3) {

num = 0;

} else {

num++;

}

$this.attr("src", imgSrc.replace(/(\d\.jpg|\w*\.jpg)$/, +num + '.jpg'));

}, settings.interval);

}, function() {

// Al retirarl el mouse

// Detenemos el loop

clearInterval(loop);

});

}

});

};

})(jQuery);

Ahora creamos nuestra vista, el archivo index.html para visualizar el resultado.

index.html


<a href="https://www.youtube.com/watch?v=dU26cGlmkRg" target="_blank">
<div class="tmbnl">
 <img src="https://i.ytimg.com/vi/4ctqJTbqKi0/2.jpg" alt="" title="" width="150" class="preViewTube" />
 <span>Metallica - Cyanide (Live)</span></div>
</a>

<span>Metallica - Cyanide (Live)</span></div>

</a>

Ahora vamos a instanciar el javascript en nuestro archivo index.html.
Colocar el siguiente código dentro de las etiquetas <script> </script> :


$(document).ready(function() {

$('.preViewTube').PreViewTube();

$('.preViewTube-constant').PreViewTube({
'interval' : 500,
'mode' : 'constant'
});

$('.preViewTube-speed').PreViewTube({
'interval' : 500
});

});

$(document).ready(function() {

$('.preViewTube').PreViewTube();

$('.preViewTube-constant').PreViewTube({

'interval' : 500,

'mode' : 'constant'

});

$('.preViewTube-speed').PreViewTube({

'interval' : 500

});

Listo !

Espero les sirva de mucho el Tutorial.

Sígueme en Twitter: @pepoflex

Hasta nuestro siguiente artículo !