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`

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

Info

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`

É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>
  Gymnopédie #1 d'Érik Satie, interprété par Kevin Mc Leod
</p>
<audio controls preload="metadata">
  <source src="Gymnopedie_No_1.ogg" type="audio/ogg">
  <source src="Gymnopedie_No_1.mp3" type="audio/mpeg">
</audio>

Gymnopédie #1 d'Érik Satie, interprété par Kevin Mc Leod

Élément pour la vidéo

`video`

É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`

É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 2
</p>
<video controls preload="metadata" poster="lego.jpg">
  <source src="lego.ogv" type="video/ogg">
  <source src="lego.mp4" type="video/mp4">
</video>

THE LEGO MOVIE 2

Exercice

Créez un fichier donald.html contenant :

Une vidéo donald-trump.mp4, aussi disponible en Ogg, muette (volume sonore à zéro) et qui démarre automatiquement avec le lecteur vidéo affiché
Un fichier audio donald-duck.mp3, aussi disponible en Ogg, qui démarre automatiquement sans lecteur audio affiché

Ressources
Audio	`donald-duck.mp3`	`donald-duck.ogg`
Vidéo	`donald-trump.mp4`	`donald-trump.ogv`

Correction

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Donald Trump vs. Donald Duck</title>
  </head>
  <body>
    <video controls autoplay muted>
      <source src="donald-trump.ogg" type="video/ogg">
      <source src="donald-trump.mp4" type="video/mp4">
    </video>

    <audio autoplay>
      <source src="donald-duck.ogg" type="audio/ogg">
      <source src="donald-duck.mp3" type="audio/mpeg">
    </audio>
  </body>
</html>

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 (i.e. exécuté dans un terminal en mode texte). Ci-dessous, une liste des options les plus utiles :

-i fichier d'entrée à convertir
-c:a codec audio (aac ou libvorbis)
-b:a débit audio (bitrate) expirmé en kbits/s (2048k par exemple) ou en Mbits/s (2M par exemple)
-c:v codec video (libx264, libtheora ou libvpx).
-b:v débit video

Exemple de conversion en MP4

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

Exemple de conversion en Ogg

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

Exemple de conversion en WebM

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

Si vous n'êtes pas sensible aux charmes des commandes en mode texte, vous pouvez tout aussi bien installer Miro Video Converter. Il est gratuit, open-source et disponible sous Windows, macOS et Linux.

Exercice 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 :

qu'elle occupe toute la largeur de l'écran (propriété CSS width)
qu'elle soit fixe (propriété CSS position du chapitre Mise en page)
qu'elle soit sous les autres éléments (propriété CSS z-index)

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

Correction

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Fullscreen Background Video</title>
    <style>
      video {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <h1>Fullscreen Background Video</h1>

    <video autoplay loop muted>
      <source src="video/water.ogv" type="video/ogg">
      <source src="video/water.mp4" type="video/mp4">
      <source src="video/water.webm" type="video/webm">
    </video>
  </body>
</html>