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