Uso de las etiquetas audio y video

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

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.

Reproducción automática

Indica al navegador que una vez finalizado la carga de la página el archivo de audio se reproduzca.

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.

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

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:

ejemplo-captura-video-html5

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:

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 😉