Audio et Vidéo

Le multimédia,
Chapitre 09
Audio et Vidéo
Nathalie Vanassche | www.nathalievanassche.be
CHAPITRE 09 : le multimédia, Audio et Vidéo
179
[Création de sites web statiques] Pratiques HTML(5), CSS 2.1 et 3
Tout ce qui est contenu multimédia et interactif nécessite l’ajout d’un moteur d’interprétation dans les navigateurs, pour
qu’ils puissent afficher ce qu’ils ne savent pas faire nativement. Ce sont les plugins.
L’HTML5 a introduit les éléments audio et video permettant « presque » d’insérer nativement du multimédia sans l’apport
de plugins propriétaires.
Il reste néanmoins certains problèmes liés à l’utilisation du multimédia en HTML5 : problèmes des formats audio et vidéo,
problèmes de la protection des sources (DRM), problèmes de compatibilité avec tous les navigateurs, interaction
utilisateur...
Ces balises ne sont pas conçues pour empêcher le téléchargement de la musique et de la vidéo. Vous ne pouvez pas
protéger votre média contre la copie.
1. INSERER DE L’AUDIO
1. L’élément audio
Pour insérer un fichier audio (un son simple, une musique, une interview, un podcast...), l’élément audio est utilisé, suivi
de l’attribut src, pour préciser le chemin d’accès au fichier source audio :
<audio src="musique.ogg"></audio>
2. Les contrôles audio
Pour permettre à l’utilisateur le contrôle du fichier audio (le démarrer, faire une pause ou arrêter l’audio), l’attribut
booléen controls est ajouté pour afficher la barre de contrôle native du navigateur :
<audio src="musique.ogg" controls></audio>
Chaque navigateur possède son propre visuel de barre de lecture,
3. L’apparence du lecteur audio
L’apparence du lecteur audio est laissée libre aux navigateurs.
4. Les attributs pour l’audio
D’autres attributs peuvent être ajoutés:
autoplay : cet attribut booléen lance la lecture du fichier audio, dès que celui-ci est disponible au chargement
de la page. Rem : mieux vaut laisser l’utilisateur décider s’il veut écouter ou pas votre fichier audio.
loop : cet attribut booléen permet de jouer le son en boucle.
preload : précise au navigateur qu’il doit charger le fichier audio au chargement de la page, afin qu’il soit
disponible au plus vite pour l’utilisateur. L’attribut preload est ignoré si autoplay est présent.
o L’attribut preload accepte comme valeur auto (équivalent à utiliser l’attribut en tant que booléen,
c’est-à-dire sans préciser de valeur) – dans ce cas, le préchargement intégral du média sera lancé, et ce
que l’utilisateur lise ou non le média. Attention, si vous avez plusieurs fichiers audio à précharger, vous
risquez de pénaliser la bande passante
o none : pas de préchargement
o metadata : uniquement les métas données attachées au fichier (dimensions, première image,
durée…) propres au média seront chargées.
muted, définis l’état par défaut du son.
5. Les formats audio
Il existe beaucoup de format audio et le W3C ne précise en aucune manière quel est le format à utiliser pour insérer un
fichier audio dans une page Web, c’est donc un peu la « guerre » des formats audio entre les navigateurs.
Actuellement, il n’y a pas un format audio qui soit « universellement » reconnu par les cinq principaux navigateurs du
marché.
La solution à cette problématique est d’indiquer plusieurs fichiers audio sources qui soient reconnus par les principaux
navigateurs. Avec les formats .mp3 et .ogg vous couvrez les cinq principaux navigateurs du marché.
Nathalie Vanassche | www.nathalievanassche.be
CHAPITRE 09 : le multimédia, Audio et Vidéo
180
[Création de sites web statiques] Pratiques HTML(5), CSS 2.1 et 3
Pour indiquer plusieurs fichiers audio sources, il faut utiliser l’élément source avec son attribut src, dans l’élément audio :
<audio>
<source src="musique.mp3">
<source src="musique.ogg">
</audio>
La lecture des sources est séquentielle : si un navigateur arrive à lire le format MP3 alors il s'arrête sur la première ligne.
Si au contraire le navigateur ne supporte pas le format mp3, alors il passe à la source suivante.
Pour l’élément source, vous pouvez ajouter l’attribut type qui permet de préciser le type de fichier source et avoir ainsi
une meilleure prise en charge des fichiers audio par les navigateurs :
<audio>
<source src="musique.ogg" type="audio/ogg"/>
<source src="musique.mp3" type="audio/mpeg"/>
<source src="musique.acc" type="audio/acc"/>
</audio>
Vous pouvez aussi préciser le codec utilisé dans l’attribut type :
<audio>
<source src="musique.ogg" type="audio/ogg ; codecs=’vorbis ’"/>
</audio>
6. Créez vos contrôles en Javascript
Chaque navigateur Web utilise sa propre interface pour afficher les boutons de contrôle de l’audio mais il est possible de
créer sa propre interface en utilisant l’API Audio avec du JavaScript.
Syntaxe
<p>Son à écouter</p>
<audio id="muzik" src="musique.mp3"></audio>
<div>
<button onclick="document.getElementById(’muzik’).play()">Jouer</button>
<button onclick="document.getElementById(’muzik’).pause()">Pause</button>
<button onclick="document.getElementById(’muzik’).volume+=0.1">Augmenter le
volume</button>
<button onclick="document.getElementById(’muzik’).volume-=0.1">Diminuer le
volume</button>
</div>
Pas d’attributs controls, puisque nous voulons créer nos propres boutons.
L’élément audio est identifié de manière unique avec l’attribut id="muzik". Nous créons des boutons (button) qui
agissent sur l’élément muzik, en utilisant les méthodes play() et pause(), et la propriété volume.
Lecture Web :
Aller plus loin dans l’API Audio, consulter la page dédiée sur le site du W3C
http://www.w3.org/wiki/HTML/Elements/audio
8. Les anciens navigateurs
Il est possible d’indiquer un message pour les « anciens » navigateur non compatibles avec l’HTML5, ce message sera
affiché par les anciens navigateurs qui ignoreront tous les éléments HTML5 et ce message sera ignoré par les navigateurs
compatibles.
<audio controls preload>
Nathalie Vanassche | www.nathalievanassche.be
CHAPITRE 09 : le multimédia, Audio et Vidéo
181
[Création de sites web statiques] Pratiques HTML(5), CSS 2.1 et 3
<source src="musique.mp3" type="audio/mpeg">
<source src="musique.ogg" type="audio/ogg">
Votre navigateur est trop ancien pour reconnaître l’HTML5
</audio>
Vous pourriez aussi placer ici une version Flash de votre fichier audio.
2. INSERER DE LA VIDEO
1. L’élément video
Comme pour l’audio, une vidéo est ajoutée à l’aide de l’élément video avec l’attribut src :
<video src="video.mp4"></video>
2. Les attributs pour la vidéo
Les attributs vus précédemment pour l’audio se retrouvent avec les mêmes fonctionnalités : controls,
preload, loop et autoplay.
<video src="video.mp4" controls preload></video>
Vous pouvez utiliser les attributs height et width pour spécifier la hauteur et la largeur de la vidéo. Cela
permet d’éviter que ce soit le navigateur qui détermine lui-même ces paramètres et vous aurez un gain de
temps dans le chargement de la page, comme pour l’insertion des images :
<video src="video.mp4" controls preload width="720" height="576"></video>
L’attribut poster permet d’afficher une image de votre choix à la place de la première image de la vidéo en
attente de démarrage :
<video src="video.mp4" controls preload width="720" height="576"
poster="image.jpg"></video>
3. L’apparence du lecteur vidéo
L’apparence du lecteur vidéo est laissée libre aux navigateurs.
4. Les formats vidéo
Pour insérer de la vidéo dans une page Web, vous avez besoin de trois « couches ».
La première est le format, c’est juste un « conteneur », une boîte qui va contenir la vidéo et l’audio. Les formats
sont reconnus à leur extension : .avi, .mov, .mp4, .mkv...
La deuxième est le codec audio, qui permet de compresser le son : MP3, OGG, AAC...
La dernière est le codec vidéo, qui permet de compresser les images.
Le constat est le même que pour l’audio, c’est la « guerre » des formats entre les navigateurs. Il est donc utile
de créer autant de fichiers vidéo que nécessaire pour avoir un maximum de compatibilité avec les navigateurs
les plus courants.
Utilisez à nouveau l’élément source avec son attribut indispensable src :
<video>
<source src="video.mp4">
<source src="video.ogg">
<source src="video.webm">
Nathalie Vanassche | www.nathalievanassche.be
CHAPITRE 09 : le multimédia, Audio et Vidéo
182
[Création de sites web statiques] Pratiques HTML(5), CSS 2.1 et 3
</video>
Vous pouvez aussi spécifier les formats et les codecs utilisés dans les vidéos pour mieux indiquer les paramètres
techniques aux navigateurs :
<source src="video.ogg" type="video/ogg ; codecs=’theora,vorbis’">
5. Convertir les vidéos
Pour avoir une compatibilité avec un maximum de navigateurs, il vous faut de nombreux fichiers vidéo avec
divers formats, retenons notamment: H.264, Ogg Theora et WebM..
Vous pouvez utiliser le logiciel minimaliste mais efficace, gratuit et multiplate-forme Miro Video Converter
(http://www.mirovideoconverter.com/).
Il permet de convertir les vidéos aux formats : .mp4, .webm, .ogv, mais aussi pour iPhone, Android.
6. Aller plus loin …
http://www.puce-et-media.com/laudio-video-en-html5/
Nathalie Vanassche | www.nathalievanassche.be