Una de las herramientas más útiles que ha aportado HTML5, es la posibilidad de mejorar la reproducción de archivos multimedia en nuestras webs. Además HTML5 nos permite construir reproductores tanto de audio como de video.
Webs tan populares como youtube, vimeo o daylimotion ya hace tiempo que incorporan reproductores en HTML5.
En este post de diseño web, vamos a hacer una breve introducción de 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.
ETIQUETA <AUDIO>
La etiqueta <audio> permite reproducir un fichero de audio, para insertarla haríamos lo siguiente:
<audio src=”audio.mp3″ type=”audio/mp3″ controls autoplay />
Sus atributos son:
- autobuffer : permite la carga automática del archivo, y 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)
ETIQUETA <VIDEO>
Para insertar vídeo en HTML 5, haríamos lo siguiente (es muy similar al caso del audio):
<video src=”video.ogg” controls autoplay />
Sus atributos son similares a los de audio:
- autoplay : reproduce automáticamente el video una vez esté listo
- controls : especifica si los controles (inicio/stop) se deben mostrar
- 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)
PROBLEMAS CON LOS CÓDECS EN AUDIO Y VIDEO
Pues todo sería perfecto si no fuese por los dichosos codecs. Desgraciadamente, aunque las etiquetas <audio> y <video> son muy fáciles de utilizar, existe el problema de la «guerra de los codecs», ya que como siempre el soporte de los codecs 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.
El uso es el siguiente:
<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>
Para terminar, también podemos encontrarnos con el caso de que un navegador no acepte HTML5, en ese caso el código que debemos insertar es el siguiente:
<video src=”video.ogg”>
<!– Código a mostrar en navegadores que no soportan HTML 5 –>
</video>
REPRODUCTORES HTML5 DE AUDIO Y VIDEO
Aquí os dejo una colección de código libre en HTML5 para que insertéis vuestros reproductores de audio y video.
WIDGETKIT MEDIA PLAYER
Soporta MP4 (H.264), WebM, FLV, WMV y MP3, completamente construido con HTML y CSS. Diseño responsive para adaptarse a todas las resoluciones de dispositivos
Misma interfaz de usuario en todos los navegadores. Customizable, Flash player para navegadores no compatibles. Funciona con Joomla y WordPress.
Widgetkit Media Player
MEDIAELEMEN.JS
Ofrece plugins para prácticamente todo tipo de blog o página web, también se adapta a todo tipo de navegador con plugins Flash y Silverlight que imitan la API de HTML5.
MediaElement.js
SOUNDMANAGER 2
Utiliza HTML5 y Flash para proporcionar un servicio fiable. Streaming y reproducción con una sola API de JavaScript. Impresionante las interfaces que puedes utilizar.
SoundManager 2
SPEAKKER
Speakker es sólo para Audio, pero es increíble. Como los demás es compatible con los distintos navegadores, pero además puedes incorporar una lista de reproducción y un compartir en redes sociales. Tiene una versión Speakker Nano, que también merece mucho la pena.
Speakker
JPLAYER
Reproductor para Audio y Video, también personalizable, muy ligero (sólo 8 kb en su versión comprimida), como todos los demás con máxima compatibilidad.
JPlayer
OLD SCHOOL CASSETTE PLAYER
Formato Vintage, un reproductor de audio HTML5 con controles realistas.
Old School Cassette
Esta es una pequeña muestra de algunos reproductores HTML5. A continuación os dejo un enlace de una web en la que se hace una comparación de los principales reproductores de Audio, Video en HTML5
