La utilización de vídeo nativo en HTML5 aún no está muy extendida. Los navegadores no compatibles con HTML5 (como Internet Explorer 8) no lo reproducen. Además que existen muchos servicios como Vimeo o YouTube que por medio de APIs o código embebido nos facilitan la tarea de incluir video en nuestro site.

Además, hay que tener en cuenta que para servir video con una calidad aceptable debemos de contar con un ancho de banda considerable. Sin embargo el tiempo pasa, los navegadores van «caducando», el ancho de banda cada vez es más barato y las novedades como el tag <video> de HTML5 y su implementación está bastante madura e incluida en los navegadores modernos.

Formatos según el navegador

Por supuesto sigue abierta la guerra entre navegadores aunque a estas alturas de desarrollo del estándar HTML5 ya son muy estables las especificaciones y con sólo un par de formatos contenedor y códecs podemos abarcar el 100% de navegadores modernos. Básicamente existen tres formatos definidos en la especificación HTML5:

  • MP4: La denominación es una abreviatura de MPEG-4 Part 14 o MPEG-4 AVC (Advanced Video Coding). Es un formato contenedor que en el caso de ficheros destinados a su reproducción en la web utilizarán para video H.264 y para audio AAC.
  • WebM: Es un formato multimedia abierto y libre desarrollado por Google y desarrollado eclusivamente para usarse con HTML5. Utiliza como códec de video VP8 (formato adquirido por Google junto con la empresa que lo desarrolló). Y para audio Vorbis, siendo todo ello contenido dentro de un formato contenedor matroska.
  • Ogg: Es el tercer formato contenedor que se soporta en HTML5. Ha sido desarrollado por la Fundación Xiph.Org utilizando como códecs de video Theora y en audio Vorbis.

Si consultamos la entrada en W3Schools relativa a la implementación de video en HTML5 observamos que todos los navegadores (salvo Opera) soportan MP4 (Firefox desde la v. 21); Opera y Firefox soportan OGG. Así pues no tenemos un único formato con el que poder satisfacer a todos. Pero por suerte sólo con dos de ellos podemos cubrir todo el abanico de navegadores.

Algunos ejemplos con FFmpeg

Vamos a poner dos ejemplos con los que mostraremos cómo convertir con el comando ffmpeg cuaquier video a un formato que pueda reproducir cualquier navegador. Imaginemos que nos entregan un video en cualquier formato (quizás MPEG-2) y cualquier tamaño o códec de audio.

Simplemente tendremos que indicar el fichero de entrada, los filtros que queramos aplicar y los codec y formato contenedor de salida. Los ejemplos que incluyo a continuación son muy simples y se centran exclusivamente en la conversión para la web, pero los que conozcáis la suite de comandos de FFmpeg sabréis la complejidad y potencia que tienen.

Convirtiendo a MP4

En este caso imaginemos que tenemos un fichero MPEG-2 y queremos convertir a MP4. Deberemos de recordar que el formato de video debe de ser h264 -vcodec h264 ; añadimos un modificador de la calidad general del video -qscale:v 7 y un filtro para fijar el tamaño a 720px x 480px -vf "scale=720:480". En el caso del audio utilizaremos AAC y un bitrate de 128kbits -acodec aac -b:a 128k.

ffmpeg -i input.mpeg  -vcodec h264 -qscale:v 7 -vf "scale=720:480" -acodec aac -b:a 128k -strict -2 output.mp4

Convirtiendo a OGG

Realizar la conversión a OGG no es más difícil. Cambiamos el códec de video a Theora -vcodec libtheora y aplicamos el mismo modificador de calidad para la imagen y para el tamaño. En el caso del audio codificaremos en vorbis y aplicaremos un nueo modificador de calidad del audio: -acodec libvorbis -qscale:a 5

ffmpeg -i estudio.mpeg  -vcodec libtheora -qscale:v 7 -vf "scale=720:480" -acodec libvorbis -qscale:a 5 output.ogg

En el caso de formatos de video distintos de 4:3

En los ejemplos anteriores me he remitido estrictamente a un vídeo con un ratio 4:3, pero puede que el vídeo que estemos convirtiendo tenga una proporción 16:9 u otro distinto. En el caso del filtro de «escalado» podemos utilizar sólo uno de los parámetros (la altura) para que realice el cálculo automático de la otra coordenada en la que incluiremos un -1. Podría ser un ejemplo como este:

ffmpeg -i estudio.mpeg  -vcodec libtheora -qscale:v 7 -vf "scale=-1:480" -acodec libvorbis -qscale:a 5 output.ogg

Incluyendo los ficheros en la web

Por último una vez convertidos los ficheros podemos ya incluir el correspondiente código HTML que nos permita reproducir nuestros videos en la web de forma nativa.

<video width="320" height="240" controls>
  <source src="output.mp4" type="video/mp4">
  <source src="output.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Como veis es muy sencillo. Y no hay excusa para no utilizarlo si vuestro ancho de banda y hosting os lo permiten.

Fuentes

FFmpeg: http://www.ffmpeg.org/ffmpeg.html
HTML5 video: http://www.w3schools.com/html/html5_video.asp

Comparte si te ha gustado

Autor:
Última actualización:

Un comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

De acuerdo con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril de 2016, consiento que mis datos sean tratados bajo la responsabilidad de Oscar Gascón Arjol para recibir respuesta a consultas. publicación de comentarios del blog y que las conserve mientras haya un interés mutuo para ello. Me doy por informado que tengo derecho a revocar este consentimiento en cualquier momento y a ejercer los de acceso, rectificación, portabilidad y supresión de mis datos y los de limitación y oposición al tratamiento dirigiéndome por email a me@oscargascon.es. También estoy informado de que puedo reclamar ante la autoridad de control a www.agpd.es.