HTML 5: Elementos multimedia

Elemento VIDEO

Contenedor de vídeo

Un formato contenedor es un tipo de formato de archivo que almacena información de vídeo, audio, subtítulos, capítulos, meta-datos e información de sincronización siguiendo un formato preestablecido en su especificación:

MPEG-4 (.mp4, .m4v)
Flash video (.flv)
Ogg (.ogv)
Webm (.webm)
AVI (.avi)

Estructura contenedor vídeo

Elementos asociados

Elemento SOURCE: Elemento en el que se referencia el archivo de vídeo (o de sonido si está dentro de elemento AUDIO). Es un elemento opcional (en su ausencia se deberá utilizar el atributo SRC en el elemento contenedor), y puede repetirse cuantas veces sea necesario.
Elemento TRACK

Atributos

CONTROLS

Su presencia hace que el navegador incluya los controles predeterminados para el vídeo. En lugar de incluir los controles predeterminados, se pueden añadir mediante Javascript, lo que hará que en la mayor parte de los navegadores el vídeo sea accesible por teclado.

Internet Explorer 9, Chrome 8, Firefox 3.5, Safari 5: no entra el foco, será necesario meter los controles por Javascript.
Opera: entra el foco y se pueden utilizar los controles del vídeo.

PRELOAD

Precarga el vídeo.

AUTOPLAY

Inicia la reproducción del vídeo de modo automático.

POSTER

Referencia un archivo de imagen que aparecerá en el área del vídeo cuando éste no esté en reproducción.

LOOP

Repetición indefinida del vídeo.

SRC

Referencia al archivo de vídeo. No se utiliza, ya que hay que añadir varias alternativas de vídeo en distintos formatos mediante elementos SOURCE.

Soporte 2010/2011

Soportan el elemento VIDEO: IE9, Firefox 3.5+, Safari 3+, Chrome, Opera.

Navegador	Theora (vorbis+ogg)	MP4 (h.264+AAC)	WebM (VP8)
Internet Explorer			Versión 9.0
Firefox	Versión 3.5		Versión 4.0
Safari		Versión 3.0
Chrome	Versión 5.0	Versión 5.0	Versión 6.0
Opera	Versión 10.5		Versión 11.0
iPhone / iTouch		Versión 3.0
Android		Versión 2.0	Versión 2.3

En Internet Explorer 9 será necesaria la instalación de codec VP8.

El único compatible con todos los formatos es Chrome, aunque próximamente dejará de soportar H.264 (enlace externo, en inglés).

Problemas de patente en H.264

H.264 tiene un inconveniente : es propiedad de MPEG LA, entidad que cobra por su utilización.

Por un lado se cobraría a los desarrolladores de aplicaciones, y por otro a los proveedores de contenido.
En agosto de 2010 se libera de modo permanente del pago a los proveedores de contenido (no a los desarrolladores de software).
Este movimiento viene motivado por la liberación por parte de Google del codec VP8 (parte de Webm).

Esto provoca que algunos navegadores no pueden soportarlo de forma nativa, debido a que no pueden o no les conviene afrontar el coste de las licencias.

Obtener la máxima compatibilidad

Habría que añadir varias alternativas de vídeo en el siguiente orden:

Theora (Vorbis+Ogg)
WebM (VP8+Vorbis)
MP4 (h.264 baseline + AAC de baja complejidad). Para que sea compatible con dispositivos móviles
Una alternativa en Flash mediante OBJECT (dentro del elemento VIDEO).

No hay ningún formato que esté soportado en todos los navegadores, ni se prevé que lo haya a corto plazo.

Saber más:

video – video (enlace externo, en inglés)
Video on the Web (enlace externo, en inglés)
Using audio and video in Firefox (enlace externo, en inglés)
Building a custom HTML5 video player with CSS3 and jQuery (enlace externo, en inglés)
Lawson, Bruce; Sharp, Remy. HTML 5: Voices that matter. New Riders, 2010. Pag. 91.
Ejemplos de multimedia en HTML 5

Ejemplos

Sin alternativa Flash:

<video width="320" height="240" controls>
  <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>

  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Y con alternativa Flash (notar que el OBJECT va anidado en VIDEO):

<video id="movie" width="320" height="240" preload controls>
  <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object width="320" height="240" type="application/x-shockwave-flash" data="video.swf">
    <param name="movie" value="video.swf" />
    <param name="allowfullscreen" value="true" />
    <p>Video acerca de [loquesea]. Descargar vídeo en formato:</p>
    <ul>
      <li><a href="pr6.mp4">MP4</a></li>
      <li><a href="pr6.webm">WebM</a></li>
      <li><a href="pr6.ogv">Ogg</a></li>
    </ul> 
  </object>
</video>

Compartir este artículo:

Datos del artículo:

Publicado el miércoles 12 de enero de 2011 a las 10:06
Seguimiento de comentarios (RSS 2.0).

Comentarios de la página

Puedes comentar o hacer trackback desde tu propio sitio web.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Outbook