Vídeo con HTML5

html5-video

HTML5 incorpora soporte nativo para vídeo que permite construir aplicaciones de procesamiento de vídeo para diversos navegadores.

<video width="320" height="240" controls="controls">
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4; codecs=&quot;avc1.4D401E, mp4a.40.2&quot;" />
     <source src="http://bennugd-vlc.googlecode.com/files/big_buck_bunny_480p.webm" type="video/webm; codecs=&quot;vp8.0, vorbis&quot;" />
     <source src="http://download.blender.org/peach/trailer/trailer_1080p.ogg" type="video/ogg" />
     Your browser does not support: Ogg/Theora, MP4 or WebM!
</video>

Como mínimo deberíamos proporcionar el vídeo en dos formatos diferentes, no existe un formato de vídeo estándar,  por ejemplo MP4 tienes patentes y no es libre, está es la razón de que Firefox no haya incorporado estos codecs a su navegador (Firefox a anunciado que en próximas versiones soportará MP4 ).

WebM es un formato multimedia abierto y libre desarrollado por Google y orientado a usarse con HTML5. Es un proyecto de software libre, nos es nada sorprendente que IE9 no lo soporte, se debe instalar el soporte de forma separada (HTML5 Video Update—WebM for IE9).

Las opciones más comunes son OGG y MP4, pero WebM está tratando de abrirse paso y convertirse en el estándar. Como siempre es probable que cada navegador se aferre a su candidato y nosotros pobres programadores tengamos que sufrirlo como siempre.

OGG contiene vídeo Theora y codecs de audio Vorbis, MP4 contiene H.264 para video y AAC para vídeo.

En la actualidad OGG y WebM son compatibles con Firefox, Chrome y Opera, mientras que MP4 funciona en Safari, IE y Chrome.

Más abajo tenéis el enlace para probar un trailer en diferentes formatos, tablas comparativas y enlaces a las páginas con especificaciones del control vídeo en HTML5.

VER TEST VIDEO

(y algunas tablas comparativas entre navegadores)

En el ejemplo he probado 3 formatos de vídeo (MP4, OGG y WebM) en tres navegadores instalador en Ubuntu:

  1. Chromium Version 25.0.1364.160 Ubuntu 13.04 (25.0.1364.160-0ubuntu3)
  2. Opera v12.16 Linux System i686, 3.8.0-21-generic
  3. Mozilla Firefox 23.0 for ubuntu

Atributos principales del elemento vídeo (referencia completa en W3Schools):

  • width y height declaran las dimensiones del vídeo.
  • controls: Indica que debe mostrar los controles del vídeo proporcionados por cada navegador.
  • autoplay: El vídeo comienza a reproducirse tan pronto como puede el navegador.
  • loop: El nombre lo dice.
  • poster: Proporciona una URL con una imagen mientras se espera a que comience reproducción del vídeo.

Formatos de vídeo (Mime Types) de la etiqueta source para vídeo:

  • “video/mp4”:  Códec de vídeo H.264 y códec de audio AAC.
  • “video/ogg”: Códec video Theora y audio Vorbis.
  • “video/webm”: Vídeo VP8 y audio Vorbis.
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s