jueves, 20 de septiembre de 2012

TUTORIAL: Uso de etiqueta Video en HTML5 + Conversion de Formatos



Este fue un tema que me causo algo de revuelo,  tuve ciertos problemas, para poder hacer reproducir el vídeo deseado en dicha practica, la idea es simple.

Quería empezar a aprender un poco de html5 y sus bondades,  así que tome  mi maquina, mi terminal con nano (un editor de texto por terminal, pero ustedes pueden usar el que gusten).

Pero antes de pasar a la teoría, explicare un poco esta etiqueta:

 la etiqueta <video> es una de las nuevas grandes maravillas de html5 permite insertar videos a tus paginas web y que estos sean reproducidos sin la necesidad de terceros, como lo es flash player.

básicamente la sintaxis simple para  esto seria la siguiente.

<video width="VALOR" height="VALOR" controls="controls">
<source src="RUTADELVIDEO" type="video/FORMATO">
</video>

Donde VALOR sera sustituido los los tamaños respectivos del cada atributo en el vídeo.
Donde RUTADELVIDEO sera la ruta donde tienes almacenado tu vídeo,incluyendo el nombre de tu vídeo.
Donde  FORMATO sera igual a el formato de tu vídeo.

Una vez explicado esto, veamos la practica.

Pero OH SORPRESA, al realizar la practica me salia una muy fea pantalla color gris como esta.


No entendía el porque, si el formato correspondía a el  formato de mi vídeo, y la etiqueta en muchas paginas era muy similar.

Metiéndome a leer un poco respecto al tema, resulta que los navegadores, suelen permitir y tener solo algunos formatos de vídeo, formatos como el mp4, flv, avi, o mpeg son formatos privativos, que no entran dentro de los estándares de muchos navegadores.

Sin embargo, hay uno que es compatible con muchos navegadores, como lo son Opera, Chrome, Firefox y Safari, lamentablemente el patito feo de la familia
(Internet Explorer, creo que aun no acepta muchas etiquetas de html5.
Este formato que salva a los navegadores, es un formato libre llamado ogg, utilizado también para reproducir audio.

pero como lo han de esperar, no es un formato muy común,  así que  tendremos que convertir los vídeos para que nuestra pagina con html5 lo soporte.

Abriremos la Terminal y teclearemos lo siguiente

sudo apt-get install  ffmpeg
sudo apt-get install 
mencoder

 Una vez  instalado, escribirán en su terminal

ffmpeg -i video_original.formatoOrigen video_nuevo.FormatoDestino


Donde formatoOrigen y FormatoDestino sera el formato inicial y final del vídeo respectivamente.

En este caso, el formato a convertir sera ogg, al terminar, moveremos el vídeo a la carpeta seleccionada y aremos los cambios correspondientes en el codigo.


<video width="VALOR" height="VALOR" controls="controls">
<source src="prueba.ogg" type="video/ogg">
</video>

Como podemos observar, el cambio esta en el src y el type, donde ahora nuestro video y tipo es ogg.

Guardamos los cambios  y ahora nuestro video sea visible.






LinkWithin

Related Posts Plugin for WordPress, Blogger...