Le multimédia en HTML5

Cours 8 – Le multimédia en HTML5
3INOC – 2013-14
B. Emery
Lemultimé diaenHTML5
Introduction
Grande nouveauté du HTML5, les éléments multimédia permettent d’inclure de la vidéo ou de l’audio
directement dans les pages HTML sans devoir recourir à des plugins tiers, comme Flash. Le principal
problème est la grande variété des formats supportés par les différents navigateurs.
Le son :
Les différents formats
Avant d’attaquer les balises permettant de diffuser des sons dans un fichier HTML, il est
important de préciser que chaque navigateur n’est capable de lire que certains types
d’encodage des fichiers audio. Ainsi, le plus grand défaut du HTML5, c’est l’obligation de
devoir posséder plusieurs formats du même fichier pour s’assurer une compatibilité maximale.
Heureusement, il existe des logiciels pour convertir les fichiers audio dans les différents
formats existant.
Chrome supporte tous les formats standards ainsi, il ne sera pas nécessaire de se soucier des
formats dans ce cours. En comparaison, Firefox ne supporte que le format Vorbis (.ogg)
tandis qu’Internet Explorer ne supporte que les formats MP3 et AAC. En fait, il n’y a qu’un
seul format compatible avec tous les navigateurs, c’est le format PCM non-compressé.
Malheureusement l’utilisation d’un format non-compressé via le web surcharge la bande
passante.
L’élément audio : <audio>
Pour insérer un élément musical dans une page HTML, il suffit d’utiliser la balise <audio> qui
possède de nombreux attributs spécifiques. Premièrement, l’attribut controls permet
d’afficher des boutons de contrôle pour lancer ou arrêter le son. Le design de ceux-ci dépend
du navigateur (à moins de les créer avec en HTML/CSS et JS).
Deuxièmement, l’attribut src permet de spécifier l’adresse url du fichier. Il n’est pas
obligatoire puisqu’il peut être remplacé par la balise <source> comme indiqué ci-dessous.
L’attribut autoplay permet de lancer la lecture immédiatement après le chargement, tandis
que l’attribut loop permet de jouer en continue.
L’attribut preload permet d’indiquer au navigateur s’il faut charger le fichier audio au
chargement de la page HTML ou non. En effet, les fichiers audio (ou vidéo) pouvant être très
volumineux, le pré-chargement d’un fichier qui ne sera pas joué consomme de la bande
passante inutilement. Cet attribut peut prendre les valeurs none (aucun), metadata (données
informatives) ou auto (préchargement complet). Il n’y a pas de valeur par défaut, car celle-ci
varie d’un navigateur à l’autre.
1
Cours 8 – Le multimédia en HTML5
3INOC – 2013-14
B. Emery
Il existe d’autres attributs moins usités, tel que muted (qui permet de couper le son au
chargement) ou mediagroup (qui permet de lier plusieurs éléments média ensemble en leur
attribuant un nom commun).
La source : <source src="fichieraudio.ext" />
En raison de la variété des formats supportés (ou plutôt non-supportés) par les navigateurs, il
vaut mieux recourir à la balise <source> située entre les balises <audio> plutôt que l’attribut
src inclus dans la balise <audio>. Ainsi pour spécifier l’adresse url de chaque format du
fichier audio, on utilise la balise <source src="fichier.ext" /> pour chaque fichier. Le
navigateur choisira automatiquement le fichier à utiliser.
C’est l’occasion de parler d’adresse relative et statique. Une adresse statique commence par
http://, elle est plus facile à repérer puisqu’il suffit de copier celle de la barre d’adresse du
navigateur. Pour une adresse relative, il faut considérer l’arborescence des dossiers, mais elle
a l’avantage de ne pas devoir être modifiée si le site change d’adresse. La position de l’adresse
relative « commence » dans le répertoire du fichier HTML qui appelle le fichier audio. Si ce
dernier se trouve dans un dossier inclus dans le dossier racine, il suffit d’indiquer le nom du
répertoire puis de séparer son nom de celui du fichier audio par un / (p.ex :
src="répertoire/fichier.ogg"). S’il faut remonter d’un niveau de répertoire on utilise le
symbole ../ (p.ex : src="../fichier.ogg"). Il est évidement possible de combiner les deux.
Exemple :
<audio controls autoplay loop>
<source src="audio/fichier.mp3" />
<source src="audio/fichier.ogg" />
<!-- les fichiers sont dans un répertoire nommé audio -->
Votre navigateur ne supporte pas la balise HTML5 audio !
<!-- Cette phrase ne sera affichée que sur un navigateur non compatible -->
</audio>
Et la vidéo :
La balise <video> est très similaire à la balise <audio> mais possède en plus un espace d’affichage
pour la vidéo et des attributs supplémentaires. Il est possible de jouer des vidéos ou de simples fichiers
audio avec l’un ou l’autre de ces éléments, mais une image ne sera affichée qu’avec l’élément
<video>.
L’élément vidéo : <video>
Très similaire à <audio>, <video> reprend les mêmes attributs. Nous pouvons ajouter à ceuxci l’attribut poster="image.jpg" (qui permet de spécifier l’adresse url d’une image de
remplacement tant que la vidéo n’est pas chargée) et les attributs width et height (qui peuvent
être remplacé par une déclaration CSS).
Concernant les formats acceptés par les différents navigateurs, encore une fois il n’y a pas
d’homogénéité. Plusieurs sources devront donc être spécifiée pour une compatibilité générale,
avec la balise <source />. Chrome supporte pratiquement tous les formats, mais Firefox ne
supporte que le format Theora (.ogg) et IE, les formats MPEG-4 ou H.264.
2
Cours 8 – Le multimédia en HTML5
3INOC – 2013-14
B. Emery
La balise de sous-titrage : <track kind="type" src="fichier.ext" />
Tout comme <source />, <track /> est inclus dans un élément <video>. Il permet d’assigner
des sous-titres à la vidéo. L’attribut kind détermine le type et peut prendre les valeurs
suivantes : subtitles (sous-titre, par défaut), captions (sous-titre pour les malentendants),
descriptions (il s’agit d’une audio-description pour les malvoyants), chapters (chapitre),
metadata (informations non affichées mais utilisée pour les scripts).
Il peut également recevoir les attributs label="français" (qui spécifie la langue pour
l’utilisateur), srclang="fr" (qui spécifie la langue pour le navigateur), et default qui permet
de déterminer quel élément <track> est utilisé par défaut durant la lecture de la vidéo.
Personnaliser les contrôleurs :
Chaque navigateur gère sa propre interface par défaut, appelée à l’aide de l’attribut controls.
Cependant, les boutons permettant le contrôle des éléments audio/vidéo peuvent être aussi créés avec
une combinaison des langages HTML, CSS et JavaScript. Cela permet de réaliser un lecteur
personnalisé ayant la même apparence sur tous les navigateurs.
Créer un bouton : <input type="button" />
Cette balise permet de créer un bouton auquel on peut assigner du code JavaScript pour
manipuler les éléments audio ou vidéo. On ajoute l’attribut value="texte" pour afficher du
texte dans le bouton.
On ajoute un gestionnaire d’événement pour appeler le code JavaScript. Habituellement, on
utilise onclick, mais d’autres peuvent être employés. Il est possible de faire de n’importe quel
élément HTML un bouton à l’aide du gestionnaire d’événement et de lui donner une certaine
forme d’interactivité à l’aide des pseudo-classes CSS comme :hover et :active.
Attributs JavaScript liés aux éléments multimédia :
Lorsqu’on associe une variable à un élément <audio> ou <video> (avec getElementById()
p.ex.), on peut récupérer et/ou modifier certains attributs par une notation pointée. Ainsi
.paused possède la valeur true si l’élément est en pause et false s’il est joué.
.playbackRate permet de contrôler la vitesse de lecture. La vitesse normale est 1.0. Une
valeur plus grande accélère la lecture, plus petite la ralentit. Théoriquement un chiffre négatif
permet de revenir en arrière, mais cela est modérément supporté par les navigateurs.
Les attributs .videoHeight et .videoWidth permettent de récupérer la hauteur et la largeur
native en pixel de la vidéo.
L’attribut .currentTime permet de récupérer et de modifier la position de la lecture, en
seconde. Et l’attribut .volume permet de régler le volume sonore, de 0.0 à 1.0.
De nombreux autres attributs sont disponibles, avec plus ou moins d’intérêt. Vous les
retrouverez sur le site du W3C.
3
Cours 8 – Le multimédia en HTML5
3INOC – 2013-14
B. Emery
Méthodes JavaScript liées aux éléments multimédia :
En plus des attributs, il existe différentes méthodes associées aux éléments multimédia. Les
plus intéressantes sont .play() et .pause() qui permettent de lancer ou d’interrompre la lecture
du fichier. L’attribut .paused ne peut être utilisé que pour savoir si l’élément est en pause ou
non, et non pour modifier son état.
Exemple de bouton play/pause fonctionnel :
<audio id="lecteur" src="mon_fichier.ogg" autoplay loop > Votre navigateur n’est pas
compatible </audio>
<!-- le lecteur ne sera pas affiché et joue automatiquement -->
<input type="button" value="Pause" onclick="playPause(this);" />
<!-- le bouton appelle la fonction suivante au click. On utilise le mot-clé this pour transmettre le
bouton lui-même en paramètre afin de pouvoir modifier sa valeur sans devoir l’associer à une
variable. -->
<script type="text/javascript">
function playPause(bouton) {
var lect=document.getElementById("lecteur");
if (lect.paused) { // on teste pour savoir si l’élément est en pause
lect.play(); // lance la lecture
bouton.value="Pause";} // affiche la valeur Pause dans le bouton.
else {
lect.pause(); // arrête la lecture
bouton.value="Jouer";}
}
</script>
Principales références :
Site du W3C : http://www.w3.org
DÉVELOPPER VOTRE SITE WEB, F. Basmaison et coll., MicroApplication 2012
4