Los elementos multimedia: audio y vídeo

1. Insertar elementos multimedia

En la actualidad, y desde hace ya bastante tiempo, insertar audio y vídeo en las páginas web es muy común, banal, y la mayoría de los internautas ya no les prestan atención. Pero, técnicamente, es otra historia. Como usted sabe, los navegadores web solo saben interpretar y, por lo tanto, mostrar, el texto, las imágenes estáticas (con los formatos .gif, .jpg y .png), las imágenes animadas (con formato .gif animado) y JavaScript. Si los sacamos de ahí, los navegadores se vuelven sordomudos. Para todo lo que sea contenido multimedia e interactivo será necesario añadir obligatoriamente un motor de interpretación en el navegador, para que pueda publicar aquellos elementos que no sepa interpretar de forma nativa. Se trata de los famosos plugins. El gran vencedor fue Flash, una tecnología propietaria de Adobe que permite insertar animaciones interactivas, así como audio y vídeo, con un único plugin: FlashPlayer.

HTML5 ha revolucionado el panorama al introducir los elementos audio y vídeo. Esos dos nuevos elementos permiten insertar archivos multimedia "casi" de forma nativa, sin necesidad de añadir plugins propietarios.

Evitar un plugin siempre es de agradecer. Los plugins son siempre una fuente de problemas: código de inserción HTML pesado, inestabilidad, brechas...

1. El elemento audio

Esta es la URL del capítulo dedicado al audio en la recomendación de HTML5: https://www.w3.org/TR/2017/REC-html52-20171214/semantics-embedded-content.html#the-audio-element.

Insertar un archivo de audio (un simple sonido, una canción, una entrevista, un podcast...) es muy sencillo: para eso tenemos el elemento audio.

Su atributo indisociable es src, que sirve para indicar la ruta de acceso al archivo de la fuente de audio.

Esta sería la sintaxis básica:

<audio src="musica.ogg"></audio> 

2. Los controles de audio

Ahora, debemos permitir que el usuario pueda controlar el audio: que pueda iniciarlo, ponerlo en pausa o pararlo.

En el elemento audio, simplemente habrá que utilizar el atributo booleano controls para que se inserte la barra de control nativa del navegador.

<audio src="musica.ogg" controls></audio> 

3. La apariencia del reproductor de audio

Como es habitual, la apariencia del reproductor de audio dependerá del navegador. Presentamos a continuación los reproductores con las nuevas versiones de los principales navegadores disponibles en diciembre de 2018:

El reproductor de audio de Opera 12:

El reproductor de audio de Chrome 29:

El reproductor de audio de Microsoft Edge:

El reproductor de audio de Safari 6:

Y para terminar, el reproductor de audio de Firefox 23:

4. Los atributos para el audio

Con el elemento audio podrá utilizar estos...

1. El elemento vídeo

La inserción de vídeos forma parte de las nuevas recomendaciones del HTML5. Su URL en el sitio del W3C es la siguiente: http://www.w3.org/TR/2017/REC-html52-20171214/semantics-embedded-content.html#the-video-element.

Es igual de sencillo que añadir audio: para insertar un vídeo deberá utilizar el elemento video con el atributo src.

Esta sería la sintaxis básica:

<video src="video.mp4"></video> 

2. Los atributos para el vídeo

Encontramos los mismos atributos que vimos para el audio, con las mismas funcionalidades: controls, preload, loop y autoplay.

<video src="video.mp4" controls preload></video> 

Puede usar los atributos height y width para especificar el alto y el ancho del vídeo. De este modo, evitaremos que sea el navegador quien determine esos parámetros y disminuiremos el tiempo de carga de la página web, al igual que ocurre con la inserción de imágenes.

<video src="video.mp4" controls preload width="720" height="576></video> 

Dispone además del atributo poster, que le permitirá mostrar la imagen que usted elija, en lugar de la primera imagen del vídeo, mientras se espera a que este comience. Resulta práctico para mostrar los "títulos de créditos"... ¡de manera estática, claro está!

<video...