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 youtubevimeo 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.

 
 

tags: audio video player html5 desarrolloweb


Utilizamos cookies propias y de terceros para mejorar nuestros servicios, mostrarle publicidad relacionada con sus preferencias, realizar análisis estadísticos sobre los hábitos de navegación de nuestros usuarios y facilitar la interacción con redes sociales. Si continúa navegando, consideraremos que acepta su uso. Puede cambiar la configuración u obtener más información aquí Política de cookies.