Usando audio y video con HTML5

Este articulo necesita una revisin editorial. Cmo puedes ayudar.

HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos <audio> y <video>,
ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.

Insertando contenido multimedia

Insertar contenido multimedia en tus documentos HTML es muy sencillo:

1 <videosrc="http://v2v.cc/~j/theora_testsuite/320x240.ogg"controls>
2 Tunavegadornoimplementaelelemento<code>video</code>.
3 </video>

Este ejemplo reproduce un vdeo de ejemplo, con los controles de reproduccin, desde el sitio Web de
Theora.

Este es un ejemplo para insertaraudio en tu documento HTML

1 <audiosrc="/test/audio.ogg">
2 <p>Tunavegadornoimplementaelelementoaudio.</p>
3 </audio>

El atributo src puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.

1 <audiosrc="audio.ogg"controlsautoplayloop>
2 <p>Tunavegadornoimplementaelelementoaudio</p>
3 </audio>

Este cdigo de ejemplo usa los atributos del elemento <audio>:

controls : muestra los controles estndar de HTML5 para audio en una pgina web.

autoplay : hace que el audio se reproduzca automticamente.

loop : hace que el audio se repita automticamente.
 1 <audiosrc="audio.mp3"preload="auto"controls></audio>

El atributo preload es usado en el elemento audio para almacenar temporalmente (buering) archivos de
gran tamao. Este puede tomar uno de 3 valores:

"none" no almacena temporalmente el archivo

"auto" almacena temporalmente el archivo multimedia

"metadata" almacena temporalmente slo los metadatos del archivo

Se pueden especicar mltiples fuentes de archivos usando el elemento <source> con el n de proporcionar
vdeo o audio codicados en formatos diferentes para diferentes navegadores. Por ejemplo:

1 <videocontrols>
2 <sourcesrc="foo.ogg"type="video/ogg">
3 <sourcesrc="foo.mp4"type="video/mp4">
4 Tunavegadornoimplementaelelemento<code>video</code>.
5 </video>

Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el
navegador usar el archivo MPEG-4. Mira tambin la lista de los formatos multimedia admitidos por los
elementos audio y video en los diferentes navegadores.

Tambin puedes especicar qu codecs requiere el archivo multimedia; de esta forma el navegador tomar
decisiones ms inteligentes:

1 <videocontrols>
2 <sourcesrc="foo.ogg"type="video/ogg;codecs=dirac,speex">
3 Tunavegadornoimplementaelelemento<code>video</code>.
4 </video>

Aqu, especicamos que el vdeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los
codecs especicados, el vdeo no ser cargado.

Si el atributo type no est especicado, el tipo de contenido multimedia se obtiene del servidor y se
comprueba para ver si el navegador lo puede manejar; si no puede ser mostrado, se comprueba el siguiente
source , si ninguno de los elementos source especicados pueden ser usados, un evento de error es
enviado al elemento video. Si el atributo type est especicado, es comparado con los tipos que el navegador
puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente source se
comprueba una vez.

Mira los eventos del contenido multimedia para una lista completa de eventos asociados con la produccin
multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira los
formatos multimedia sportados por los elementos audio y video.

Controlando la reproduccin multimedia

Controlando la reproduccin multimedia
Una vez que has incrustado el contenido multimedia en tu documento HTML usando los nuevos elementos,
puedes controlarlos mediante programacin en JavaScript. Por ejemplo, para iniciar (o reiniciar) la
reproduccin, puedes hacer esto:

1 varv=document.getElementsByTagName("video")[0];
2 v.play();

La primera lnea obtiene el primer elemento video en el documento, y la segunda lnea llama al mtodo
play() del elemento, como est denido en la interfaz nsIDOMHTMLMediaElement que es usada para
implementar los elementos multimedia.

Controlar un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen
usando algo de Javascript es muy sencillo.

1 <audioid="demo"src="audio.mp3"></audio>
2 <div>
3 <buttononclick="document.getElementById('demo').play()">ReproducirelAudio</button
4 <buttononclick="document.getElementById('demo').pause()">PausarelAudio</button>
5 <buttononclick="document.getElementById('demo').volume+=0.1">AumentarelVolumen</button
6 <buttononclick="document.getElementById('demo').volume=0.1">DisminuirelVolumen</
7 </div>

Deteniendo la descarga de contenido multimedia

Mientras que detener la reproduccin multimedia es tan fcil como llamar al mtodo pause() del elemento, el
navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado a
travs de la recoleccin de basura.

Aqu un truco para detener la descarga de una sola vez:

1 varmediaElement=document.getElementById("myMediaElementID");
2 mediaElement.pause();
3 mediaElement.src="";

Estableciendo una cadena vaca al atributo src del elemento multimedia, tu destruyes el decodicador
interno del elemento con lo que detienes la descarga.

Buscando a travs de los medios

Los elementos de los medios proporcionan apoyo para mover la posicin de reproduccin actual a puntos
especcos en el contenido de los medios.Esto se hace estableciendo el valor de la propiedad horaActual en
el elemento; verHTMLMediaElement para ms detalles sobre las propiedades del elemento.Basta con
establecer el valor en el tiempo, en segundos, con el que desea reproducir para continuar.

Usted puede utilizar el elementoseekablepropiedad para determinar los rangos de los medios de
comunicacin que estn disponibles para la bsqueda de la actualidad.Esto devuelve un objeto TimeRanges
que enumera los rangos de veces que se puede tratar de:

1 varmediaElement=document.getElementById('mediaElementID');
2 mediaElement.seekable.start();//Returnsthestartingtime(inseconds)
3 mediaElement.seekable.end();//Returnstheendingtime(inseconds)
4 mediaElement.currentTime=122;//Seekto122seconds
5 mediaElement.played.end();//Returnsthenumberofsecondsthebrowserhasplayed

Especicacin del rango de reproduccin

Al especicar el URI de los medios de comunicacin para un elemento <audio>o<video> , puede incluir
opcionalmente informacin adicional para especicar la parte de los medios a reproducir.Para ello, aada
una almohadilla ("#"), seguida de la descripcin del fragmento de medios.

Un intervalo de tiempo se especica mediante la sintaxis:

1 #t=[starttime][,endtime]

El tiempo se puede especicar como un nmero de segundos (como un valor de punto otante) o como una
hora / minuto / segundo tiempo separado con dos puntos (por ejemplo, 2:05:01 durante 2 horas, 5 minutos y
1 segundo).

Algunos ejemplos:

http://foo.com/video.ogg # t = 10,20
Especica que el vdeo debe desempear el rango de 10 segundos a travs de 20 segundos.

http://foo.com/video.ogg # t =, 10.5
Especica que el vdeo se reproducir desde el principio a travs de 10,5 segundos.

http://foo.com/video.ogg # t =, 02:00:00
Especica que el vdeo se reproducir desde el principio a travs de dos horas.

http://foo.com/video.ogg # t = 60
Especica que el vdeo se debe reproducir desdelos 60 segundoshasta el nal.

Gecko 9.0 note

(Firefox9.0/Thunderbird9.0/SeaMonkey2.6)
 La porcin rango de reproduccin del elemento de la especicacin URI media esta en Gecko 9.0 (Firefox 9.0 / Thunderbird
9.0 / SeaMonkey 2.6).En este momento, esta es la nica parte de la especicacin de los medios de comunicacin
Fragmentos URI implementado por el Gecko, y slo se puede utilizar cuando se especica la fuente para los elementos
de los medios de comunicacin, y no en la barra de direcciones.

Opciones de reserva
HTML incluido entre, por ejemplo, las etiquetas de apertura y cierre de los elementos de los medios de
comunicacin son procesados por los navegadores que no admitan medios de HTML5.Usted puede tomar
ventaja de este hecho para proporcionar medios alternativos de reserva para esos navegadores.

Esta seccin proporciona dos opciones de reserva para video.En cada caso, si el navegador soporta vdeo
HTML5, que se utiliza, de lo contrario, se utiliza la opcin de reserva.

Utilizacin de Flash
Puede usar Flash para reproducir una pelcula formato Flash si el<video>no se admite elemento:

1 <videosrc="video.ogv"controls>
2 <objectdata="flvplayer.swf"type="application/xshockwaveflash">
3 <paramvalue="flvplayer.swf"name="movie"/>
4 </object>
5 </video>

Tenga en cuenta que no se debe incluirclassiden elobjetotag con el n de ser compatible con los
navegadores que no sean Internet Explorer.

Reproduccin de vdeos Ogg utilizando un applet de Java

Hay un applet de Java llamada Cortado que se puede utilizar como reserva para reproducir vdeos Ogg en
los navegadores que no tienen soporte para Java, pero no es compatible con vdeo HTML5:

1 <videosrc="my_ogg_video.ogg"controlswidth="320"height="240">
2 <objecttype="application/xjavaapplet"width="320"height="240">
3 <paramname="archive"value="cortado.jar">
4 <paramname="code"value="com.fluendo.player.Cortado.class">
5 <paramname="url"value="my_ogg_video.ogg">
6 <p>YouneedtoinstallJavatoplaythisfile.</p>
7
 8 </object>
</video>

Si no se crea un elemento secundario alternativa del elemento de objeto cortado, como el<p>elemento
superior, Firefox 3.5 instalaciones que manejan el video de forma nativa, pero no tienen Java instalado
incorrectamente informarn al usuario de que es necesario instalar un plugin para ver el contenido en la
pgina.

Gestin de errores
(Fire f o x 4 / Th u n d e rb ird 3 . 3 / S e a Mo n ke y 2 . 1 )

A partir de Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), el tratamiento de errores se ha revisado
para que coincida con la ltima versin de la especicacin HTML5.En lugar de que el errorsea enviado al
elemento en s, ahora se entrega a los elementos "hijos" <source> correspondientes a las fuentes que
resultan en el error.

Esto permite detectar las fuentes no pudieron cargar, que puede ser til.Considere este HTML:

1 <video>
2 <sourceid="mp4_src"
3 src="video.mp4"
4 type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"'>
5 </source>
6 <sourceid="3gp_src"
7 src="video.3gp"
8 type='video/3gpp;codecs="mp4v.20.8,samr"'>
9 </source>
10 <sourceid="ogg_src"
11 src="video.ogv"
12 type='video/ogg;codecs="theora,vorbis"'>
13 </source>
14 </video>

Dado que Firefox no es compatible con MP4 y 3GP, debido a su naturaleza de patente gravado,
los<source>elementos con el ID "mp4_src" y "3gp_src" recibirnerroreventos antes de cargar el recurso
Ogg.Las fuentes son juzgados en el orden en el que aparecen, y una vez que uno carga con xito, las fuentes
restantes no se trataron en absoluto.

Detectar si las fuentes no han cargado

Paradetectarqutodosloselementos<source> no han podido cargarse, se debe comprobar el valor
de la propiedad NetworkState qu poseen todos los elementos de tipo multimedia.Si el valor
esHTMLMediaElement.NETWORK_NO_SOURCE, se sabr que las fuentes no se cargaron correctamente.
Si en ese momento se agrega otra fuente mediante la insercin de un nuevo elemento <source> como hijo
del elemento multimedia, Gecko intenta cargar el recurso especicado.

Mostrando contenido fallback cuando la fuente no puede ser

cargada
Otra forma de mostrar el contenido fallback de un vdeo cuando ninguna de sus fuentes pudieron ser
cargadas, es aadir un manejador de excepciones o errores en el ltimo elemento <source>. As usted podr
reemplazar el vdeo con el contenido fallback:

<videocontrols>
<sourcesrc="dynamicsearch.mp4"type="video/mp4"></source>
<ahref="dynamicsearch.mp4">
<imgsrc="dynamicsearch.jpg"alt="Appdeb&uaacute;squedadin&aacute;micaenFirefoxOS
</a>
<p>Clicenlaim&aacute;genparareproducirunv&iacute;deodemodelaappdeb&uaacute;squeda
</video>

varv=document.querySelector('video'),
sources=v.querySelectorAll('source'),
lastsource=sources[sources.length1];
lastsource.addEventListener('error',function(ev){
vard=document.createElement('div');
d.innerHTML=v.innerHTML;
v.parentNode.replaceChild(d,v);
},false);

Vase tambin
Los elementos relacionados con los medios HTML:<audio>,<video>,<source>;

Vdeo Manipular con canvas

Presentacin de la extensin de API Audio

nsIDOMHTMLMediaElement

Formatos de los medios admitidos por los elementos de audio y vdeo

Theora Cookbook

Popcorn.js - Media Framework HTML5

Kaltura Solucin videoteca , una biblioteca de JavaScript (mwEmbed) que soporta un retorno sin
problemas con HTML5, VLC Player, Java Cortado y OMTK Vorbis reproductor de Flash.(Es utilizado por
Wikimedia)
OMTK - ash , una biblioteca de Flash que implementa un decodicador Vorbis
 Projekktor jugador , un contenedor de JavaScript para audio vdeo-tags con fallback ash, de cdigo
abierto, GPL

Applet Cortado , una solucin de reproduccin de audio / vdeo en Java que mantiene Xiph.org

Video.JS , un reproductor de vdeo HTML5 de cdigo abierto y un marco.

MediaElement.js - marco audio / video HTML5 de cdigo abierto con una cua de Flash
personalizada que imitan API multimedia HTML5 para exploradores ms antiguos.
FLV Player - HTML5 reserva soporte del reproductor de vdeo

HTML5 Documentation

Audio/Video SVG MathML AppCache SemanticTags

HTML
Canvas WebGL WebForms Microformats

Storage WebSockets Events Drag/Drop Geolocation

JavaScript
IndexedDB WebWorkers ProtocolHandler Focus

NewSelectors Visual Eects

CSS
Typography

Aprender lo mejor del desarrollo web

Subscrbete a nuestro boletn:

you@example.com

SUSCRIBIRSE

Por ahora, el boletn solo est disponible en ingls.