Category: Programación

Vídeos en páginas web

Ahora que prácticamente todos los navegadores soportan las etiquetas audio y video de HTML5 meter vídeos en las páginas es muy sencillo. Yo utilizo VideoJS, que funciona estupendamente.

Para convertir los vídeos a los formatos mp4 y webm estos son los programas que uso:

– WinFF: este tiene versión para Windows y Linux. Seleccionas el vídeo a convertir  y le pones como salida MPEG-4 y como Preset FullScreen o WideScreen según el aspect ratio sea cuadradote o panorámico. Convierte el fichero a .mp4 y además aprovecha todos tus procesadores, así que va como un tiro.

– Transmageddon: este es sólo para Linux. Le enchufas el video y seleccionas de Preset “HTML5 WebM” y te genera el .webm, aunque es bastante más lento que el otro.

Si se quiere hacer por línea de comandos hay que utilizar ffmpeg:

ffmpeg -i filename.flv -vcodec libvpx -acodec libvorbis filename.webm

ffmpeg -i filename.flv -qscale 0 -ar 22050 -vcodec libx264 filename.mp4

– Actualizado 19/03/14: según el comentario de Manu he actualizado la línea de comandos para convertir a mp4, ¡gracias bro!

– Actualizado 25/09/14: he encontrado otro programa (solamente para Linux) que permite convertir a los dos formatos. Se llama Arista Transcoder y trae un montón de configuraciones predefinidas para convertir vídeos para distintos dispositivos.

Capturar imagen de una web desde el servidor

Empiezo el blog con un programa para capturar una imagen de una web desde el servidor. Después de investigar algunas opciones que hay para hacerlo desde el navegador (por ejemplo html2canvas) he encontrado una forma mucho más sencilla y que muestra una captura perfecta de cualquier página web, incluyendo animaciones flash.

El programa que nos permite hacer esto se llama PhantomJS y aunque permite hacer muchísimas más cosas (es un navegador webkit completo) aquí voy a contar el proceso de generar una imagen de cualquier página web.

Nos descargamos el programa y subimos a nuestro servidor el ejecutable correspondiente a nuestro sistema operativo. Una vez hecho esto ya podemos crearnos el script que capturará la imagen:

var page   = require('webpage').create();
var system = require('system');
var url    = system.args[1];
var path   = system.args[2];
var width  = system.args[3];
var height = system.args[4];

page.viewportSize = { width: width, height: height };
page.open(url, function () 
{
    setTimeout(function()
    {
        page.render(path);
        phantom.exit();
    }, 1000);
});

Guardamos este script como webSnap.js, por ejemplo. El script recibe cuatro parámetros: la URL de la página a capturar, el path del fichero donde queremos guardar la imagen y el ancho y el alto de la ventana del navegador con el que se simulará estar viendo la página. Con estos datos crea una página, ajusta el tamaño del navegador y la abre, guardando después la captura en el fichero que le hayamos dicho (soporta PNG, GIF, JPG y PDF, dependiendo de la extensión del nombre que le pasemos).

El timeout a la función render() lo he puesto porque en unas pruebas que he estado haciendo con un visor de publicaciones me aparecía la imagen en blanco, lo más seguro es que para una página web normal no haga falta.

Con esto ya lo tenemos todo, solamente nos faltaría invocar al programa pasando los parámetros que queramos:

phantomjs webSnap.js http://www.yahoo.es yahoo.jpg 1024 768

Y tendremos la captura de la página web en su totalidad. Posteriormente si queremos podremos recortarla o hacer cualquier otra cosa con ella.

Esta es la imagen resultante del comando anterior:

yahoo