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)
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 atributoSRC
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 elementoVIDEO
).
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>

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.