Cómo visualizar videos FLV en fancybox

Es muy común a día de hoy colocar videos en nuestras páginas web. Para ello tenemos dos alternativas utilizar algún proveedor de videos que nos preste su ancho de banda (youtube, vimeo, …) o utilizar el de nuestro servidor. Hay casos en los que elegir nuestro servidor puede ser debido a motivos de privacidad de los contenidos.

Sea como sea, si lo que te interesa es subir un video FLV a tu propio servidor y además utilizarlo con el plugin Fancybox, entonces puedes seguir leyendo. Lo primero es tener un reproductor de FLV para web. Hay cientos de reproductores disponibles, tanto gratuitos como de pago, tan solo hay que buscar flv player en google. Podeis utilizar por ejemplo el de flv-player.net que tiene varias versiones (completas o más ligeras sin algunas funcionalidades).

Una vez tenemos el archivo flv y el reproductor flv (es un archivo swf), ya solo nos falta descargar Fancybox. Suponemos que sabemos utilizar fancybox, por tanto montamos una página sencilla que requiera los archivos javascript necesarios así como sus hojas de estilos.

En está pagina añadimos un enlace:

Ver video

Si nos fijamos en el href le hemos colocado un id. De esta forma fancybox cargará el contenido de dicho identificador en el popup que abra. Por tanto ahora solo nos falta definir dicho identificador.

Hemos introducido la capa con identificador “flv” dentro de otra capa con “display” “none”, de esta manera al entrar en la página no aparecerá el video directamente. Dentro de la capa “flv” tenemos la etiqueta “object” que lleva el reproductor de FLV (player_flv_maxi.swf) y una serie de parametros para configurar el reproductor donde el más importante es el que define el video a reproducir y cuyo nombre es “flv”. En el ejemplo vemos como le asignamos mi_video.flv como video a reproducir.

Finalmente solo nos falta el código javascript que va a hacer que al hacer click en nuestro enlace se abra Fancybox con nuestro video.

$("a.video_flv").fancybox({
'overlayOpacity': 0,
	'hideOnContentClick': false,
	'padding': 0,
	'autoScale': false,
	'autoDimensions': false,
	'width': 680,
	'height': 495,								
	'titleShow': false,
	'overlayColor': '#000'
});

Estamos utilizando un selector con jquery para añadirle el evento de fancybox con una configuración donde cabe destacar el autoscale y autodimensions desactivados para asi fijar el tamaño del popup a abrir. De esta forma conseguimos ver nuestro video flv en fancybox.

Comentarios

Comentario de jaimegpe - 03 de Julio de 2012 - 19:37
Hola antes que nada felicidades por el post esta muy bien, pero tengo una pequeña duda, ¿esto se podria utilizar para ver diferentes videos en una misma galeria usando el mismo reproductor y lightbox, en vez que aplicarselo a un solo video estatico en la web? digo me imagino que usando las variables indicadas, solo que no estoy tan adentrado en la programación, pero si me gustaria saber si este codigo se podria modificar para hacer lo que pregunto, de antemano gracias y felicitacioens de nuevo, saludos.
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí