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 y 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
La etiqueta permite reproducir un fichero de audio, para insertarla en nuestro código hay que hacer lo siguiente:
Los atributos proprios de la etiqueta
- 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
Para insertar unvídeo en HTML 5, hay que introducir el siguiente código:
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
Para más información sobre compatibilidades, podéis echar un vistazo a la tabla que aparece en wikipedia.
La etiqueta
Veamos como:
Si un navegador no acepta HTML5, en cambio tenemos que escribir las siguientes líneas de código:
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.
