Le multimédia

Il fut un temps où faire jouer des fichiers audio ou vidéo dans une page web était une chose compliquée. Tout d'abord, avant l'arrivée du HTML5, il fallait recourir à des greffons pour faire jouer des fichiers multimédia. L'introduction des éléments audio et video par le HTML5 a grandement simplifié les choses. Un autre problème était que, jusqu'à récemment, pour des raisons de redevances liées à des brevets, les formats audio et vidéo supportés par les navigateurs variaient d'un navigateur à l'autre. Heureusement, les temps ont changé et aujourd'hui les principaux navigateurs jouent les deux formats qu'on rencontre le plus souvent, MP3 et MP4.

L'élément audio

Comme son nom l'indique, l'élément audio permet de jouer des fichiers audio. À ce moment, le seul format supporté par l'ensemble des navigateurs récents est le format MP3. Les principaux attributs de la balise <audio> et leur usage le plus courant sont comme suit :

src : la valeur est l'URL du fichier qui doit être joué.

controls : si l'attribut est présent, le fichier affichera les contrôles (volume, etc.) pour le fichier.

autoplay : si l'attribut est présent, le fichier commencera à jouer dès qu'il sera chargé, ce qui peut être désagré­able pour l'usager. L'utilisation de cet attribut est donc déconseillée.

loop : si l'attribut est présent, le fichier jouera en boucle.

muted : si présent, le son au départ est mis à zéro.

Voici un exemple :

<audio src="../media/ccomp.mp3"

controls style="display: block; width: 300px; margin: auto;">
Votre navigateur ne supporte pas l'élément audio.
</audio>

À noter que :

  • si le navigateur ne supporte pas l'élément audio, il affichera ce qu'il y a entre les balises <audio> et </audio>, à savoir « Votre navigateur ne supporte pas l'élément audio. »
  • la déclaration « display: block; » est là pour permettre de centrer l'élément dans son conteneur (voir la propriété display au chapitre suivant).

Ce code produit le résultat suivant :

L'élément video

L'élément video s'utilise de manière très semblable à l'élément audio. Voici un exemple de code :

<video src="../media/ferwil4b.mp4" controls width="320" height="180" poster="../images/video.jpg" style="display: block; margin: auto;">
Votre navigateur ne supporte pas l'élément video.
</video>

et voici le résultat généré :

Outre les attributs déjà rencontrés à la section précé­dente, la balise <video> admet les attributs suivants :

width et height : les dimensions de la zone de l'écran réservée au film, en pixels CSS (voir chapitre 2). Contrai­rement à ce qui se passe avec les photos, la vidéo ne sera pas déformée si ces nombres ne sont pas dans le même rapport que les dimensions de la vidéo elle-même. Le navigateur ajustera les dimensions pour que la vidéo s'affiche correctement dans la zone réservée.

poster : cet attribut facultatif a pour valeur l'URL d'une image à afficher jusqu'à ce qu'on fasse jouer la vidéo.

Il est à noter qu'on peut utiliser le CSS pour spécifier les dimensions de la vidéo, comme dans l'exemple suivant :

.hd_6 {
display: block; margin: auto;
width: 320px; height: 180px;
}

<video class="hd_6" src="../media/ferwil4b.mp4" controls>
Votre navigateur ne supporte pas l'élément video.
</video>

L'élément source

Au lieu de spécifier la source du fichier multimédia dans la balise <audio> ou <video>, on peut le faire en utilisant une ou plusieurs balise(s) <source> comme dans les exemples suivants :

<audio controls style="display: block; width: 300px; margin: auto;">
<source src="../media/ccomp.ogg" type="audio/ogg" />
<source src="../media/ccomp.wav" type="audio/wav" />
<source src="../media/ccomp.mp3" type="audio/mp3" />
Votre navigateur ne supporte pas l'élément audio.
</audio>

<video class="hd_6" controls>
<source src="../media/ferwil4b.webm" type="video/webm" />
<source src="../media/ferwil4b.ogg" type="video/ogg" />
<source src="../media/ferwil4b.mp4" type="video/mp4" />
Votre navigateur ne supporte pas l'élément video.
</video>

Le navigateur examinera les fichiers dans l'ordre où ils sont spécifiés. S'il en trouve un de format compatible, il le fera jouer et ignorera ceux qui suivent. Sinon, il affichera le message qui suit les balises <source>. La possibilité de spécifier des fichiers de formats différents est utile lorsqu'on veut maximiser les chances de compatibilité avec des navigateurs plus anciens.

L'autre attribut courant de la balise <source> est le type MIME du fichier.

Accueil