De la misma forma que se pueden añadir a las páginas imágenes con <img>, el audio y el video también tienen su manera con <audio> y <video>.
Aunque hay que tener unos puntos en cuenta con el uso de estas etiquetas:
- Es fácil descargar videos o audio de los reproductores HTML5.
- No soporta el stream de video y audio a otro ordenador.
- El streaming de video no es adaptable a diferentes resoluciones como puede ser en youtube.
Para los ejemplos que pondré a continuación os recomiendo trabajar desde una misma carpeta, donde se meterá el documento HTML y los archivos de audio y vídeo.
La etiqueta <audio>
Empecemos usando la etiqueta <audio>. Yo en mi caso descargué una canción llamada Scale-free de Oorlab aquí.
|
1 2 3 |
<p>Canción para desconectar un poco, <cite>Scale-free de Oorlab</cite>:</p> <audio src="Oorlab-Scale-free.mp3" controls></audio> |
Con el atributo src indicamos la ruta del archivo a reproducir, si está en la misma carpeta será como en el ejemplo. Con el atributo controls se añade al reproductor un set de controles básico. Según el navegador que usemos el reproductor tendrá un aspecto u otro.
La ventaja de <audio> es que soporta varios atributos. Uno de ellos es preload. Con este atributo se puede decir al navegador como debería descargar el archivo. Puede tener 3 valores:
- Auto: Se descarga junto con la página, de manera que el usuario lo tendrá listo cuando clique en play.
- Metadata: Sólo se descarga los datos de menor importancia como por ejemplo la duración.
- None: No realiza ninguna descarga.
Si se usan los valores none o metadata el navegador descargará el archivo de audio cuando el usuario dé al play.
|
1 |
<audio src="Oorlab-Scale-free.mp3" controls preload="metadata"></audio> |
Reproducción automática
Indica al navegador que una vez finalizado la carga de la página el archivo de audio se reproduzca.
|
1 |
<audio src="Oorlab-Scale-free.mp3" controls autoplay></audio> |
Esto es ideal si quieres que en tu página web quieres música de fondo, recuerda que puedes quitar los controles del reproductor si no añades el atributo controls.
Reproducción en bucle
Con este atributo el navegador vuelve a reproducir el audio cuando este finaliza.
|
1 |
<audio src="Oorlab-Scale-free.mp3" controls loop></audio> |
Para que sacarle provecho a este atributo es recomendable usar una canción que termine donde empiece.
La etiqueta <video>
Para el ejemplo descargué el vídeo Time Lapse de Caracas (NOCHE) de luismi160496 desde aquí.
|
1 2 |
<p>La noche en Caracas</p> <video src="caracas-timelapse.mp4" controls></video> |
Como puedes ver es igual que en <audio> y también puede usar los atributos preload, autoplay y loop. A mayores cuenta con otros: width, height y poster.
Con width y height se puede ajustar el ancho y la altura respectivamente. Un ejemplo:
<video src=»caracas-timelapse.mp4″ controls width=»600″ height=»300″></video>
En cuanto al atributo poster permite poner una imagen que debería estar en el lugar del vídeo. Esto se da si el primer frame del vídeo no se descargó todavía, si el preload tiene valor none o si el vídeo seleccionado no fue encontrado. En mi caso realicé una captura del vídeo:
|
1 |
<video src="caracas-timelapse.mp4" controls poster="captura.jpg" width="600" height="300"></video> |
Hay un atributo para <audio> y <video> bastante curioso llamado mediagroup. Este atributo lo que hace es vincular varios multimedia para que se reproduzcan al mismo tiempo. Para que funcione es preciso que los archivos vinculados tengan el mismo valor de mediagroup:
|
1 2 3 4 5 6 7 |
<video src="ejemplo.mp4" controls mediagroup="grupo1"></video> <video src="ejemplo2.mp4" controls mediagroup="grupo1"></video> |
Podría darse el caso que grabaste el concierto en diferentes ángulos y quieres que el usuario vea lo que pasó en cada instante en diferentes sitios.
Sin embargo, mediagroup no tiene un uso muy extendido debido que el soporte con los navegadores es limitado, de hecho a mi no me funcionó.
Formatos multimedia
Para finalizar hablaré de los formatos multimedia. A día de hoy estos son los más utilizados:
| Formato | Descripción | Extensión | MIME Type |
|---|---|---|---|
| MP3 | Es el formato de audio más popular. | .mp3 | audio/mp3 |
| Ogg Vorbis | Es un gratis y libre con una calidad alta comparado al MP3. | .ogg | audio/ogg |
| WAV | Formato original del audio digital raw. No está comprimido. | .wav | audio/wav |
| H.264 | Video de alta definición, muy usado en Blu-ray, en páginas web como youtube y Vimeo además de los plugins Flash y silverlight. | .mp4 | video/mp4 |
| Ogg Theora | Es gratis y libre. A pesar de no tener una calidad tan alta como el H.264, es bastante aceptable y es suficiente para la mayoría del público. | .ogv | video/ogv |
| WebM | Es un estándar gratis creado por Google cuando compró VP8. Todavía no alcanza la calidad del H.264 | .webm | video/webm |
Seguramente os hagáis 2 preguntas: qué es el MIME Type y por qué saco este tema.
El MIME Type es una pieza de información que identifica el tipo de contenido en un recurso web. El servidor web antes de enviar la página al navegador envía el MIME type. Así el navegador sabe que hacer con esa página y los contenidos que contiene. Si hay problemas debes de asegurarte que el servidor Web esté configurado para que envíe el MIME correcto asociado a la extensión del archivo.
Ahora os explico el por qué. Resulta que no todos los navegadores soportan todos los formatos, por lo menos no de forma nativa. Así que os dejo un tabla indicando que navegadores son compatibles con ciertos formatos y a partir de que versión del navegador.
| Formato | Internet Explorer | Chrome | Firefox | Safari | Opera | Safari en IOS | Navegador de android |
|---|---|---|---|---|---|---|---|
| MP3 | 9 | 5 | 21 | 3.1 | – | 3 | 2.3 |
| Ogg Vorbis | – | 5 | 3.6 | – | 10.5 | – | – |
| WAV | – | 8 | 3.6 | 3.1 | 10.5 | – | – |
| H.264 | 9 | 5 | 21 | 3.1 | – | 4 | 2.3 |
| Ogg Theora | – | 5 | 3.5 | – | 10.5 | – | – |
| WebM | – | 6 | 4 | – | 10.6 | – | 2.3 |
Y hasta aquí el post de hoy. Espero que os haya servido de ayuda y os haya gustado. A seguir picando. Saludos 😉