Vídeo en página web usando HTML5

La versión 5 del lenguaje HTML ha traído numerosas mejoras. Uno de los campos en que el lenguaje se ha vuelto más potente ha sido en todo lo relativo a multimedia, por lo que ya no se justifica el uso de la tecnología Flash para la mayor parte de estas tareas.

La publicación de vídeo desde la página web usando HTML5 es muy sencilla. La etiqueta <VIDEO>, que no existía en HTML4, utiliza varios atributos entre los que se encuentran:

  • src: la URL del vídeo que se va a reproducir
  • source: puede enlazar a diferentes orígenes (src)
  • widht: la anchura de la ventana del reproductor
  • height: la altura de la ventana del reproductor
  • autoplay: si se desea que el vídeo se reproduzca automáticamente
  • controls: si se desea mostrar controles de reproducción
  • preloads: específica cómo se lanza el vídeo cuando se carga la página en que está incrustado, tiene 3 valores:
    • auto: el vídeo se carga por completo
    • metadata: sólo se cargan los metadatos
    • none: no se carga el vídeo.

NOTA: es conveniente añadir en el archivo .htaccess, que está en la raíz del servidor web Apache, los tipos MIME pues sin ello es posible que no se reproduzcan correctamente. La forma de hacerlo es añadir estas líneas en el archivo .htaccess:

AddType audio/x-m4a .m4a
AddType audio/mp4a-latm .m4b
AddType audio/mp4a-latm .m4p
AddType video/mp4 .mp4
AddType video/x-m4v .m4v
AddType audio/ogg oga ogg
AddType video/ogg ogv


Procedimiento

La forma más elemental de utilizar esta etiqueta es como sigue:

<VIDEO controls src="video.mp4">
</VIDEO>

En este caso se reproduce un vídeo MP4 pero nos encontramos con el problema de que Safari e Internet Explorer aceptan vídeos en formato MP4 pero Firefox y Chrome precisan formato OGV (Ogg Vorbis) por lo que la forma ideal es preparar 2 versiones del vídeo, una MP4 y otra OGV, y utilizar el atributo source para especificar los 2 vídeos diferentes:

<VIDEO STYLE="border-width:6px; border-style:solid; border-color:#696969;" width="640" height="360" controls preload="auto">
<SOURCE src='juker.mp4' type='video/mp4; codecs="avc1,mp4a"' />
<SOURCE src='juker.ogv' type='video/ogg; codecs="theora,vorbis"' />
</VIDEO>

Partiendo de la base de que en el mundo Mac tendremos el vídeo en formato MP4, podemos convertirlo a OGV con una herramienta de línea de comandos muy sencilla de utilizar, se llama ffmpeg2theora y se encuentra en Internet en forma de un paquete instalador llamado ffmpeg2theora-0.28.pkg. La herramienta ffmpeg2theora se instala en /usr/local/bin por lo que está accesible desde cualquier ventana de Terminal y su uso es tan sencillo como ésto:

ffmpeg2theora videoclip.avi
#(genera videoclip.ogv)
#
ffmpeg2theora videoclip.avi --subtitles subtitulo.srt
#(igual, con subtítulos)