lAudio et la Vido en html 5

1. Introduction :
Avec le langage HTML5, il est devenu possible dintgrer directement dans une page web des
fichiers audio et vido sans avoir besoin de plugins. Ceci se fait grce lintroduction de deux
nouvelles balises : la balise <audio> et la balise <video>.
Ces fichiers peuvent tre sous de nombreux formats dont les principaux sont les suivants :

Les formats audio

MP3 : cest lun des formats des plus utiliss et des plus compatibles ;
AAC : c'est un format de bonne qualit qui est utilis principalement par Apple ;
OGG : le format Ogg Vorbis est trs rpandu dans le monde du logiciel libre ;
WAV : cest un format non compress, quil faut viter autant que possible son
utilisation.
Les formats vido
Pour les vidos, un format, reconnu par lextension du fichier (AVI, MP4,), est compos
des deux lments suivants :
Un codec audio : c'est le format du son de la vido, qui est gnralement
compress ;
Un codec vido : c'est le format de compression des images, dont les principaux
pour le web sont :
H.264 :cest l'un des formats les plus puissants et les plus utiliss ;
Ogg Theora : cest un codec gratuit et libre ;
WebM : cest un codec gratuit et libre propos par Google.
Remarque :
Il est conseill de proposer les fichiers audios et vidos dans plusieurs formats pour qu'ils
soient lisibles par la majorit de navigateurs.

2. Insertion dun lment audio

Pour insrer un fichier son dans une page web, on utilise la balise <audio> dont les
principaux attributs sont :

src : spcifie lURL du fichier audio lire ;

controls : permet dajouter les boutons de contrles Lecture , Pause Volume
et la barre de dfilement ;
width : pour modifier la largeur de l'outil de lecture audio ;
loop : la musique sera joue en boucle ;
autoplay : la musique sera joue ds le chargement de la page ;
preload : indique si la musique peut tre pr-charge ds le chargement de la page ou
non. Cet attribut peut prendre les valeurs suivantes :

 auto (par dfaut) : le navigateur dcide s'il doit pr-charger toute la musique, ou
bien uniquement les mtadonnes ou rien du tout ;
metadata : charge uniquement les mtadonnes (dure, etc.) ;
none : pas de pr-chargement.
Exemple
<audio src = "bienvenue.mp3" controls></audio>
Remarque
Il est conseill dajouter un texte entre les deux balises <audio> et </audio> qui sera affich
au niveau des navigateurs qui ne reconnaissent pas cette balise.
Exemple
<audio src = "bienvenue.mp3" controls> Votre navigateur nest pas mis
jour </audio>

3. Insertion dun lment vido

Pour insrer un fichier vido dans une page web, on utilise la balise <video> dont les
principaux attributs sont :

src : spcifie lURL du fichier vido lire ;

poster : image afficher la place de la vido tant que celle-ci n'est pas lance. Par
dfaut, le navigateur prend la premire image de la vido ;
controls : permet dajouter les boutons de contrles Lecture , Pause Volume
et la barre de dfilement ;
width : pour modifier la largeur de la vido ;
height : pour modifier la hauteur de la vido ;
loop : la vido sera joue en boucle ;
autoplay : la vido sera joue ds le chargement de la page ;
muted : indique au lecteur de dsactiver le son de la vido ;
preload : indique si la vido peut tre pr-charge ds le chargement de la page ou
non. Cet attribut peut prendre les valeurs suivantes :
auto (par dfaut) : le navigateur dcide s'il doit pr-charger toute la vido, ou bien
uniquement les mtadonnes ou rien du tout ;
metadata : charge uniquement les mtadonnes (dure, dimensions, etc.) ;
none : pas de pr-chargement.

Exemple :

<video
src = "bienvenue.mp4"
width="600"></video>

controls

poster

"image.jpg"

Remarque :
Il est conseill dajouter un texte entre les deux balises <video> et </video> qui sera affich
au niveau des navigateurs qui ne reconnaissent pas cette balise.

Exemple :

<video src = "bienvenue.mp4" controls poster = "image.jpg" width="600">

Votre navigateur nest pas mis jour </video>

4. Llment source :
La balise <source> est utilise pour dfinir diffrents formats alternatifs au niveau des
lments <audio> ou <video> pour permettre un support plus large par les diffrents
navigateurs. Les principaux attributs de cet lment sont les suivants :

src : indique lURL du fichier audio ou vido ;

type : indique le type de la ressource, qui peut prendre lune des valeurs : audio/mpeg,
audio/ogg, audio/wav, video/mp4, video/ogg, video/webm...

Exemples :

<audio controls>

<source src="bienvenue.mp3" type = "audio/mp3" />

<source src="bienvenue.ogg" type = "audio/ogg"/>
Votre navigateur ne supporte pas la balise audio

</audio>

<video controls poster="image.jpg" width="600">

<source src="bienvenue.mp4" type = "video/mp4" />

<source src="bienvenue.webm" type = "video/webm" />
<source src="bienvenue.ogv" type = "video/ogg" />
Votre navigateur ne supporte pas la balise vido

</video>

Remarque :
L'ordre d'apparition des fichiers sous diffrents formats dans les lments <source>
correspond l'ordre dans lequel le navigateur essayera de les reconnatre. Ds qu'un format
est reconnu, les autres seront ignors.