Audio et vidéo

Avant HTML5, l'intégration de sons et de vidéos nécessitait l'utilisation de plugins propriétaires, c'est-à-dire des logiciels externes au navigateur comme Adobe Flash Player. Afin d'harmoniser l'utilisation de fichiers média, HTML5 introduit deux nouveaux éléments.

Élément pour l'audio

audio logo HTML5

Élément HTML permettant d'incorporer un fichier audio en tant que ressource embarquée. Cet élément dispose des attributs suivants :

controls
Affiche la barre d'outils du lecteur audio.
preload
Définit le comportement du navigateur vis-à-vis du fichier audio.
  • auto le fichier audio est téléchargé dans son intégralité au chargement du document Web.
  • metadata seules les meta-données (durée par exemple) sont téléchargées.
  • none le fichier audio n'est pas téléchargé au chargement du document Web.
autoplay
La lecture du fichier audio démarre automatiquement.
loop
Le fichier audio est joué en boucle.
muted
Le volume sonore est fixé à zéro.

Il existe plusieurs formats décrits dans la spécification de l'élément audio mais tous ne sont pas correctement gérés par les navigateurs Web. Le tableau ci-dessous recense le support des trois formats pour les navigateurs les plus courants.

Navigateur Ogg MP3 WAVE
Edge
Internet Explorer
Firefox *
Chrome
Safari
Opera

* Le codec MP3 étant couvert par un brevet qui n'est pas sous licence libre, celui-ci n'est pas intégré à Firefox. Le support MP3 dépend donc du système d'exploitation.

Même si le format MP3 est géré par les navigateurs les plus courants, il est recommandé de proposer aussi une version Ogg du même document sonore. En effet, à niveau de compression égal, la qualité du format Ogg serait supérieure à celle du format MP3.

source logo HTML5

Élément désignant une source pour l'élément audio.

src
URL du fichier audio.
type
type MIME du fichier audio (cf. tableau ci-dessous).
Conteneur Codec Type MIME
Ogg Vorbis audio/ogg
MP3 MP3 audio/mpeg
WAVE PCM audio/wav
<p>
  Ritt der Walküren (Richard Wagner)
</p>
<audio controls preload="metadata">
  <source src="walkuren.ogg" type="audio/ogg">
  <source src="walkuren.mp3" type="audio/mpeg">
</audio>

Ritt der Walküren (Richard Wagner)

Élément pour la vidéo

video logo HTML5

Élément HTML permettant d'incorporer un fichier vidéo en tant que ressource embarquée. Cet élément dispose des attributs suivants :

controls
Affiche la barre d'outils du lecteur vidéo.
poster
Affiche une image avant le lancement du fichier vidéo.
preload
Définit le comportement du navigateur vis-à-vis du fichier vidéo.
  • auto le fichier vidéo est téléchargé dans son intégralité au chargement du document Web.
  • metadata seules les meta-données (durée, résolution par exemple) sont téléchargées
  • none le fichier vidéo n'est pas téléchargé au chargement du document Web.
autoplay
La lecture du fichier vidéo démarre automatiquement.
loop
Le fichier vidéo est joué en boucle.
muted
Le volume sonore est fixé à zéro.
Navigateur MP4 Ogg WebM
Edge
Internet Explorer
Firefox *
Chrome
Safari
Opera
25+

* Les codec H264 et AAC étant couverts par un brevet qui n'est pas sous licence libre, ceux-ci ne sont pas intégrés à Firefox. Le support MP4 dépend donc du système d'exploitation.

source logo HTML5

Élément désignant une source pour l'élément vidéo.

src
URL du fichier vidéo.
type
type MIME du fichier vidéo (cf. tableau ci-dessous).
Conteneur Codec video Codec audio Type MIME
MP4 H264 AAC video/mp4
Ogg Theora Vorbis video/ogg
WebM VP8 Vorbis video/webm
<p>
  THE LEGO MOVIE
</p>
<video controls preload="metadata" poster="lego.jpg">
  <source src="lego.ogg" type="video/ogg">
  <source src="lego.webm" type="video/webm">
  <source src="lego.mp4" type="video/mp4">
</video>

THE LEGO MOVIE

FFmpeg

Il existe un très grand nombre de suites logiciels permettant d'effectuer de la conversion de fichiers vidéo. FFmpeg est une solution open source disponible à la fois sous Windows, macOS et Linux.

Dans sa déclinaison la plus sobre, FFmpeg se présente sous la forme d'un outil en ligne de commande. Ci-dessous, une liste des options les plus utiles :

Exemple de conversion en MP4

ffmpeg -i in.avi -r 25 -c:a aac -b:a 128k -c:v libx264 -b:v 2M -f mp4 out.mp4

Exemple de conversion en Ogg

ffmpeg -i in.avi -r 25 -c:a libvorbis -b:a 128k -c:v libtheora -b:v 2M -f ogg out.ogg

Exemple de conversion en WebM

ffmpeg -i in.avi -r 25 -c:a libvorbis -b:a 128k -c:v libvpx -b:v 2M -f webm out.webm

Exercice 19 Fullscreen Background Video

On trouve de plus en plus de sites Web qui utilisent une vidéo en fond d'écran. Pour le moment, CSS3 ne permet pas d'utiliser un fichier vidéo comme paramètre de la fonction url de la propriété background.

L'astuce consiste à incorporer la vidéo grâce à l'élément HTML5 video et de faire en sorte :

Essayez de mettre en pratique cette technique avec l'un des fichiers vidéo ci-dessous.

Correction