Le multimédia : audio et vidéo

1. Insérer du multimédia

Aujourd’hui (et depuis longtemps déjà), insérer de la vidéo et de l’audio dans les pages web est très commun, très banal et la plupart des internautes n’y prêtent plus attention. Mais techniquement, ce fut une autre histoire. Vous le savez, les navigateurs web ne savent interpréter et donc afficher que le texte, les images fixes (aux formats .gif, .jpg et .png), les images animées (au format .gif animé) et le JavaScript. En dehors de cela, les navigateurs sont sourds et muets. Tout ce qui est contenu multimédia et interactif nécessite forcément l’ajout d’un moteur d’interprétation dans les navigateurs, pour qu’ils puissent afficher ce qu’ils ne savent pas faire nativement. Ce sont les fameux plugins. Le grand vainqueur fut Flash, technologie propriétaire Adobe qui permet d’insérer des animations interactives, de l’audio et de la vidéo, avec le seul plugin FlashPlayer.

Le HTML5 a plus que bousculé tout cela en introduisant les éléments audio et video. Ces deux nouveaux éléments permettent « presque » d’insérer nativement du multimédia sans l’apport de plugins propriétaires.

Faire abstraction d’un plugin est toujours appréciable....

1. L’élément audio

Voici l’URL du chapitre consacré à l’audio, dans la recommandation du HTML5 : https://www.w3.org/TR/2017/REC-html52-20171214/semantics-embedded-content.html#the-audio-element.

Pour insérer un fichier audio (un son simple, une musique, une interview, un podcast...), rien de plus simple : l’élément audio est fait pour.

Son attribut indispensable est src, pour préciser le chemin d’accès au fichier source audio.

Voilà la syntaxe basique :

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

2. Les contrôles audio

Maintenant, il faut donner à l’utilisateur le contrôle du fichier audio : il faut qu’il puisse démarrer, faire une pause et arrêter l’audio.

Dans l’élément audio, il suffit d’utiliser l’attribut booléen controls pour afficher la barre de contrôle native du navigateur.

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

3. L’apparence du lecteur audio

Comme toujours, l’apparence du lecteur audio est laissée libre aux navigateurs, voilà les lecteurs avec les dernières versions des principaux navigateurs en décembre 2018.

Voilà le lecteur d’Opera :

Le lecteur de Chrome :

Le lecteur de Microsoft Edge :

Le lecteur avec Safari :

Et enfin, le lecteur avec Firefox :

4. Les attributs pour l’audio

Dans l’élément audio, vous pouvez ajouter d’autres...

1. L’élément video

L’insertion d’une vidéo fait partie intégrante de la nouvelle recommandation du HTML5. Voici son URL sur le site du W3C : https://www.w3.org/TR/2017/REC-html52-20171214/semantics-embedded-content.html#the-video-element.

Tout aussi simple que pour ajouter de l’audio, pour insérer une vidéo, utilisez l’élément video avec l’attribut src.

Voilà la syntaxe basique :

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

2. Les attributs pour la vidéo

Vous retrouvez les attributs vus précédemment pour l’audio, avec les mêmes fonctionnalités : controls, preload, loop et autoplay.

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

Vous pouvez utiliser les attributs height et width pour spécifier la hauteur et la largeur de la vidéo. Cela permet d’éviter que ce soit le navigateur qui détermine lui-même ces paramètres et vous aurez un gain de temps dans le chargement de la page, comme pour l’insertion des images.

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

Vous avez à votre disposition l’attribut poster qui permet d’afficher une image de votre choix à la place de la première image de la vidéo en attente de démarrage....