Reproductores Audio y Video en HTML5

Una de las aportaciones más útiles de  HTML5, es la posibilidad de mejorar la reproducción de archivos multimedia, audio y video, en nuestra web.

Además HTML5 nos permite construir reproductores tanto de audio como de video.

De hecho, ya hace tiempo que webs populares como youtube, vimeo o daylimotion  incorporan reproductores en HTML5.

En este artículo, vamos a introducir brevemente las etiquetas  <AUDIO> y <VIDEO> de HTML5, y vamos a ver varios tipos de reproductores que nos pueden ser muy útiles a la hora de construir nuestros sitios web.

LA ETIQUETA <AUDIO> DE HTML5

La etiqueta <audio> permite reproducir un fichero de audio, para insertarla en nuestro código hay que hacer lo siguiente:

  <audio src=”audio.mp3″ type=”audio/mp3″ controls autoplay />
  

Los atributos proprios de la etiqueta <AUDIO> son:

• autobuffer : permite la carga automática del archivo; los valores posibles son “true” o “false”
• autoplay : reproduce automáticamente el audio
• controls : muestra los controles de reproducción
• height : define la altura del reproductor (en píxeles)
• loop : ejecuta la reproducción en bucle, cuando finaliza vuelve a empezar
• src : URL del archivo o fuente a reproducir
• type : tipo de archivo o fuente (audio/mp3, video/ogg, video/mp4, …)
• width : define el ancho del reproductor (en píxeles)

LA ETIQUETA <VIDEO> DE HTML5

Para insertar unvídeo en HTML 5, hay que introducir el siguiente código:

<video src=”video.ogg” controls autoplay />

Los atributos se parecen a los de audio:

• autoplay : reproduce automáticamente el video
• controls : especifica si los controles (inicio/stop) se muestran
• height : define la altura del reproductor (en píxeles)
• muted : especifica si el video debe estar apagado
• poster : especifica la imagen que debe ser mostrada mientras el video se carga y hasta que el usuario pulse el botón de inicio
• preolad : especifica cómo debe cargarse el video cuando se carga la página
• src : URL del archivo o fuente a reproducir
• width : define el ancho del reproductor (en píxeles)

LOS CÓDECS

Aunque las etiquetas <audio> y <video> sean muy fáciles de utilizar, existe el problema de la de los codecs, ya que el soporte delos mismos en los distintos navegadores no es igual.

Para más información sobre compatibilidades, podéis echar un vistazo a la tabla que aparece en wikipedia.

La etiqueta <source> nos va a ayudar a incluir en un mismo video, los diferentes códecs y así conseguir la máxima compatibilidad en diferentes navegadores.

Veamos como:

<video controls> 
<source src=nombre.ogv type=’video/ogg; codecs="theora, vorbis"'> 
<source src=nombre.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40"> 
<p> Tu navegador no puede visualizar este vídeo. Descarga el vídeo 
<a href=nombre.ogv>How to leverage a synergy video</a> 
y reprodúcelo directamente en tu ordenador. </p> 
</video>

Si un navegador no acepta HTML5, en cambio tenemos que escribir las siguientes líneas de código:

<video src=”video.ogg”>

<!– Código a mostrar en navegadores que no soportan HTML 5 –>

</video>

6 REPRODUCTORES HTML5 DE AUDIO Y VIDEO

1. WIDGETKIT MEDIA PLAYER

Soporta MP4 (H.264), WebM, FLV, WMV y MP3, completamente construido con HTML y CSS. Es diseño es de tipo responsive o sea adaptable todas las resoluciones de dispositivos
Funciona con Joomla y WordPress.

2. MEDIAELEMEN.JS

Tiene plugins para todo tipos de blog o página web, también es adaptable a navegadores con plugins Flash y Silverlight que imitan la API de HTML5.

3. SOUNDMANAGER 2

SoundManager2 está desarrollado en HTML5 y Flash para proporcionar un servicio fiable.

4. SPEAKKER

5. JPLAYER

Reproductor Audio y Video, personalizable y muy ligero.

6. OLD SCHOOL CASSETTE PLAYER

Un reproductor vintage audio HTML5.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.