La balise <video>
Intégration d’une vidéo
Autrefois, il fallait intégrer un plugin Flash par exemple pour pouvoir lire des vidéos sur une page web. HTML 5 apporte la balise <video> qui permet très facilement d’intégrer une vidéo à une page web.
<video controls src="video.ogv">Ici la description alternative</video>
L’attribut src permet d’indiquer l’adresse vers le fichier vidéo. Il est possible d’ajouter les attributs height et width pour indiquer les dimensions de la vidéo, ce qui reste recommandé.
Quels sont les formats à utiliser ?
La lecture par le navigateur n’est toutefois pas assurée. Il faut en effet que ce dernier gère le format du fichier vidéo. Pour cibler le plus grand nombre, une même balise vidéo peut intégrer plusieurs sources, chacun ayant un format différent. Cela permet d’indiquer prioritairement les fichiers vidéos à lire.
<video width="400" height="222" controls="controls">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
</video>Ici, le navigateur lira le MP4/H.264 si le format est géré, sinon il lira le fichier au format WebM, et sinon il lira le fichier au format Ogg Theora. On note que dans ce cas, l’attribut controls doit avoir la valeur controls et ne doit pas être un attribut simple comme dans le premier exemple avec un seul format vidéo. Cette remarque est valable pour les autres attributs également (autoplay, etc.).
Pour s’assurer que les types MIME des vidéos soient bien interprétés par les navigateurs, il est recommandé de les intégrer dans un fichier .htaccess ou dans le vhost du site comme ceci :
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .web
Le format MP4 est le plus répandu et le plus supporté par les navigateurs (à partir de la version 9 pour IE). OGG n’est pas du tout supporté par IE ni Safari. WebM fonctionne sous IE si les codecs sont installés et ne fonctionne pas sur Safari. Il est important de noter qu’en vidéo, le format du fichier n’est souvent qu’un conteneur. Le MKV par exemple, peut contenir une vidéo encodée avec le codec H.264 et dont le son est encodé en MP3.
Attributs de la balise video
| Attribut | Usage |
|---|---|
| controls | Donne accès aux contrôles de lecture / de navigation / de volume etc. |
| preload=“auto” | Indique au navigateur de démarrer le téléchargement de la vidéo dès chargement de la page. On s’attend donc à ce que l’utilisateur lira probablement la vidéo. Trois valeurs sont possibles : – auto (par défaut) : le navigateur décide de tout télécharger, ou juste les métadonnées du fichier, ou rien du tout. – metadata : charge uniquement les métadonnées (durées, etc.). – none : Aucun pré chargement. |
| autoplay=“true” | Indique au navigateur de lancer automatiquement la lecture. |
| poster=“preview.jpg” | Indique au navigateur l’image à afficher par défaut dans la zone de la vidéo avant que la lecture ne soit lancée. |
| loop | Indiquer si la lecture doit s’effectuer en boucle. |
| width & height | Largeur du lecteur. |
L’audio
Intégration d’un son
L’intégration d’un son pour lecture depuis une page se fait simplement grâce à la balise HTML 5 <audio>.
<audio src="musique.mp3">Ici la description alternative</audio>
Avec cette simple ligne, le navigateur n’affichera rien. La balise est en effet à compléter de différents attributs pour permettre d’afficher un lecteur avec un minimum de contrôles accessibles à l’utilisateur.
Attributs de la balise audio
| Attribut | Usage |
|---|---|
| controls | Donne accès aux contrôles de lecture / de navigation / de volume etc. |
| preload=“auto” | Indique au navigateur de démarrer le téléchargement de la piste audio dès chargement de la page. On s’attend donc à ce que l’utilisateur lira probablement la piste. Trois valeurs sont possibles : – auto (par défaut) : le navigateur décide de tout télécharger, ou juste les métadonnées du fichier, ou rien du tout. – metadata : charge uniquement les métadonnées (durées, etc.). – none : Aucun pré chargement. |
| autoplay=“true” | Indique au navigateur de lancer automatiquement la lecture. |
| loop | Indiquer si la lecture doit s’effectuer en boucle. |
| width | Spécifier la largeur du lecture. |
Pour lire plusieurs formats, au cas où l’un d’entre eux ne soit pas disponible pour un utilisateur, on procède comme pour la balise des vidéos.
<audio width="240" controls="controls">
<source src="son1_1.mp3">
<source src="son1_2.aac">
Ici l'alternative à la musique : un lien de téléchargement, un message, etc.
</audio>Quels sont les formats à utiliser ?
Les formats compressés sont évidemment recommandés. Le MP3, l’AAC (utilisé essentiellement par Apple), l’OGG (très rependu dans l’univers Linux car c’est un format libre), le WAV (format non compressé, donc plus volumineux, non recommandé).