Ediciones ENI Editorial | líder en informática
Los recursos multimedia
La presencia de elementos multimedia
En la actualidad es muy normal insertar vídeo y audio en las páginas web. Hace algunos años, la lucha fue terrible entre los plugins que permitían leer elementos multimedia, con Adobe Flash (abandonado definitivamente por Adobe en 2020), Microsoft Media Player y Apple QuickTime. Además, cada plugin solo leía los archivos codificados con códecs específicos. Pero HTML5 ha cambiado esto, introduciendo los nuevos elementos audio y video.
Los formatos y los códecs
Sigue existiendo un verdadero problema de uniformización de los elementos multimedia en Internet: la compresión y el formato de difusión de los archivos. Como para las fotos, no puede directamente insertar en su sitio web un vídeo o un archivo de audio. Estos archivos en bruto no están adaptados para una difusión en Internet. En primer lugar, hay que comprimirlos con un códec y publicarlos con un formato conocido por los navegadores.
Sin entrar en consideraciones demasiado técnicas sobre los elementos multimedia, abordaremos algunos aspectos sobre la compresión y difusión de estos elementos.
Para comprimir un archivo, es necesario utilizar un códec. Este acrónimo significa Codificador-Decodificador. Sepa que hay muchos códecs para elementos multimedia: VP9, MP3, AAC, H.265, etc. A continuación, para distribuir estos archivos comprimidos, es necesario «empaquetarlos» en un formato de transporte. Por ejemplo, .ogg, .mp4 o .webm.
En lo que respecta a la difusión, el W3C aconseja utilizar un formato abierto (open source) y gratuito. Hay disponibles varias soluciones:
-
Mozilla, Opera y Google utilizan los códecs Theora y Vorbis, y .ogg para el formato de difusión.
-
Apple y Microsoft utilizan los códecs H.264 y MP4, y .mp4 para el formato.
-
Google ofrece desde 2010 los códecs VP8 y Vorbis, y .webm...
La inserción de un vídeo
1. El elemento <video>
El elemento <video> permite insertar un archivo de vídeo en sus páginas web:
<video>
...
</video> Cabe señalar que el elemento <video> no tiene ninguna propiedad de visualización por defecto.
2. El origen del vídeo
En el elemento <video>, el atributo src indica la ruta de acceso al origen del archivo de vídeo que se va a utilizar.
<video src="venecia.mp4"></video> Si visualiza la página web, verá solamente la primera imagen del vídeo:
Por el momento, no hay ninguna forma de utilizar el vídeo.
3. Los controles
Ahora, es necesario dar la posibilidad de reproducir este vídeo. Para esto, puede agregar el atributo booleano autoplay al elemento <video>:
<video src="venecia.mp4" autoplay></video> Este atributo permite reproducir automáticamente el vídeo durante la carga de la página. Pero el visitante no tendrá forma de gestionar este vídeo.
Para proporcionar medios de control sobre el vídeo, es necesario utilizar el atributo booleano controls:
<video src="video.mp4" controls></video> En este caso, cada navegador deberá mostrar los controles, botones de gestión del vídeo, según su propia interfaz.
A continuación se muestra...
La inserción de un archivo de audio
La inserción de un archivo de audio es muy similar a lo que acabamos de ver para el vídeo.
Al igual que ocurre con <vídeo>, la etiqueta <audio> no tiene definida ninguna propiedad de visualización por defecto.
El elemento que se ha de usar es <audio> y el atributo src indica cuál es el archivo a utilizar. Hay que añadir el atributo controls para mostrar los botones de control del audio. Encontramos los atributos autoplay, loop y preload.
<audio src="musica.mp3" controls preload autoplay loop></audio> A continuación se muestra la visualización obtenida en Google Chrome
Como sucedía anteriormente, puede ofrecer varias fuentes con diferentes formatos de difusión:
<audio controls>
<origen src="musica.mp3">
<origen src="musica.webm">
</audio> Y para terminar, también puede indicar un mensaje para los navegadores obsoletos:
<audio controls>
<origen src="musica.mp3">
<origen src="musica.webm">
<p>Su navegador es demasiado antiguo para reproducir estos
archivos de audio</p>
</audio> 
