Audio y Video con HTML5

Bueno estoy haciendo un curso de HTML5 y CSS3 y que mejor que compartirlo con todos. Voy a empezar con las etiquetas audio y video que son una de las nuevas características de HTML5 que permiten incluir tanto videos como audios en nuestras paginas web sin tener que depender de reproductores externos y olvidarnos del reproductor de flash para este tipo de contenidos, aunque como no hay nada perfecto cada navegador soporta unos formatos distintos asique podemos optar por obligar a nuestros usuarios a usar el navegador que nosotros queramos o como es más lógico incluir varios formatos para que «todo el mundo» pueda verlo.

La etiqueta audio

Lo primero la etiqueta audio con todo lo que se le puede poner:


<audio controls preload="auto|metadata|none" autoload loop>
    <source src="sonidos/archivo.mp3" type="audio/mpeg" />
    <source src="sonidos/archivo.ogg" type="audio/ogg" />
    <source src="ruta/archivo.wav" type="audio/wav" />
    Lo que pongas aquí se muestra si el navegador no soporta la etiqueta audio. 
</audio>

Aunque creo que es bastante sencillo, vamos a ver cada opción:

controls

Si se pone se muestran los controles (play/pause, volumen, etc.) y sino pues no se muestran.

preload

Con esta opción podremos controlar si el audio se carga al cargarse la pagina (si ponemos auto), si solo se cargan los metadatos (metadata) o por el contrario si queremos que no se cargue nada deberemos de poner none.

autoload

Como su propio nombre indica si ponemos esta opción el audio comenzara a reproducirse automáticamente al cargar la página.

loop

Indica que el audio volverá se reproducirá en bucle.

src

Aquí indicamos la ruta de nuestro archivo de audio

type

Con esta etiqueta indicamos que es un archivo de audio de alguno de los 3 formatos soportados. En la tabla siguiente se pueden ver los formatos que admite cada navegador.

BrowserMP3WavOgg
Internet Explorer 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+NOYESYES
Safari 5+YESYESNO
Opera 10+NOYESYES

La etiqueta source

El uso de esta etiqueta nos permite indicar múltiples fuentes. El navegador siempre reproducirá la primera que soporte en el caso de que soporte más de una. En el caso de que solo se quisiese usar un formato de audio no seria necesaria la inclusión de esta etiqueta y tanto el src como el type irían dentro de la etiqueta audio. Aunque como ya comente entonces solo funcionaria en los navegadores que soportasen ese formato.


<audio controls src="sonidos/archivo.mp3" type="audio/mpeg" />

Finalmente comentar que cualquier contenido que se entre la etita audio de apertura y de cierre que no sea la etiqueta source solamente se mostrara en los navegadores que no soporten la etiqueta audio.


<audio controls>
    <source src="sonidos/archivo.mp3" type="audio/mpeg" />
    Tu navegador parece que no soporta la etiqueta audio de HTML5, puedes descargarte la canción <a href="sonidos/archivo.mp3">aquí</a>
</audio> 

La etiqueta video

Al igual que para la etiqueta audio comenzaremos poniendo con todos sus posibles atributos


<video width="640" height="360" controls preload autoplay poster="ruta/imagen.jpg">
    <source src="videos/mivideo.mp4" type='video/mp4; codecs="avc1,mp4a"' />
    <source src="videos/mivideo.ogv" type='video/ogg; codecs="theora,vorbis"' />
    <source src="videos/mivideo.webm" type='video/webm; codecs="vp8,vorbis"' />

    Tu navegador parece que no soporta la etiqueta video de HTML5, puedes descargarte el video <a href="videos/mivideo.mp4">aquí</a>
</video>

Como podéis ver es prácticamente idéntico a la etiqueta video, vamos entonces a ver esas diferencias:

width y height

Sobra cualquier explicación, pues obviamente sirven para definir las dimensiones con las que se mostrará el video. Si no se indican el video se muestra con sus dimensiones originales.

poster

Con este atributo podemos indicar una imagen (un titulo, una portada, el logo de la pagina o lo que nos apetezca) para que se muestre antes de que se empiece a ver el video.

type

Aunque ya lo hemos visto para la etiqueta audio ahora además de los 3 tipos de video posibles (mp4, ogg, webm) hay que indicar también los codecs para reproducirlos. Aunque con copiarlo ya se puede usar nunca esta de más saber que el valor del códec de antes de la coma es el códec de video y el posterior el del audio del video.

Para terminar os pongo la tabla de compatibilidades de los distintos formatos videos con los navegadores más usados.

BrowserMP4WebMOgg
Internet Explorer 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+NOYESYES
Safari 5+YESNONO
Opera 10.6+NOYESYES

Con las etiquetas de HTML5 audio y video se estandariza la forma de introducir multimedia en la web aunque lamentablemente para poder verlo en diferentes navegadores es necesario introducir por lo menos 2 formatos de audio o de video y así cubrir todo las posibilidades.

Y sino siempre nos quedan las clásicas etiquetas object y embed para agregar videos o audio, pero por algo habrán creado unas etiquetas exclusivas para esto… y por supuesto se pueden meter estas estas etiquetas dentro de las de audio y video.


<video width="640" height="360" controls autoplay preload poster="imagenes/Desert.jpg">
    <!-- Indicamos la ruta del video para IE, Chrome y Safari -->
    <source src="videos/WithinTemptationTheaterTourTrailer2012.mp4" type='video/mp4; codecs="avc1,mp4a"' />

    <!-- Indicamos la ruta del video para Firefox y Opera -->
    <src="videos/WithinTemptationTheaterTourTrailer2012.ogv" type='video/ogg; codecs="theora,vorbis"' />
    <source src="videos/WithinTemptationTheaterTourTrailer2012.webm" type='video/webm; codecs="vp8,vorbis"' />

    <!-- Alternativas por si el navegador no soporta la etiqueta video (Safari en windows) -->
    <object data="videos/WithinTemptationTheaterTourTrailer2012.mp4" width="640" height="360">
        <param name="loop" value="true" /> 
        <param name="play" value="true" />
        <!-- Alternativas por si tampoco tiene los codecs necesarios para reproducirlo (IE7 y IE8) -->
        <embed src="videos/WithinTemptationTheaterTourTrailer2012.swf" width="640" height="360" menu="true" loop="true" play="true" />
    </object>

    <!-- Y si todo falla siempre nos queda la descarga -->
    <p> Tag video no soportado por el navegador. Si no puede visualizarlo puede descargarlo <a href="videos/WithinTemptationTheaterTourTrailer2012.mp4">aqui</a> </p>
 </video>

Para la máxima compatibilidad posible podríamos usar este código que vale para ver que puedes ver el video en cualquier cosa, como me dio a mi por probar pero siempre hay que pensar que si el usuario tiene un navegador prehistórico y no puede verlo seguro que es porque no quiere verlo así que para que molestarse?