Comment intègre-t-on de l'audio et de la vidéo avant HTML5?

Vous vous souvenez sans doute de la balise <object> vue dans le cours de HTML (HTML4). Cette balise sert à introduire un contenu pour qu'il soit exécuté directement sur le navigateur. Le contenu peut être un document PDF, une piste audio ou encore un flux vidéo.

Le fait de déclarer la balise <object> ne garantit pas la bonne exécution du contenu par le navigateur. En effet, celui ci interpelle le plugin approprié. C'est en réalité ce plugin incorporé au navigateur qui exécute le contenu souhaité. Si le plugin n'est pas disponible ou obsolète, alors le contenu ne sera pas exécuté. Le message "Vous devez télécharger le lecteur Flash Media Player" vous dit quelque chose?

HTML5 a mis fin à cette pratique. En effet, un contenu multimédia n'a plus besoin des services des plugins pour qu'il soit correctement déchiffré. Les navigateurs (compatibles HTML5) peuvent désormais exécuter les flux audio et vidéo d'une manière autonome.

Balise <audio>

La balise <audio> permet au navigateur de lire une piste audio. Elle peut accueillir plusieurs attributs, les plus importants sont:

Attribut src

L'attribut src désigne la source du contenu audio à lire. Il s'agit d'un chemin relatif ou absolu désignant l'emplacement de la piste audio.

Cet attribut pose un problème de taille. En effet, quelle serait le format de la piste audio à jouer? Le format MP3 par exemple est le plus populaire vu sa qualité sonore acceptable et sa petite taille qui le rend approprié à un usage sur le Web. Cependant, ce format n'est pas reconnu par tous les navigateurs compatibles HTML5.

Heureusement, il existe un autre format qui est le OGG Vorbis (développé par la fondation Mozilla). Il faut donc alterner entre les deux formats MP3 et OGG pour assurer la bonne exécution du flux audio.

Le tableau suivant illustre la compatibilité des navigateurs connus pour les deux formats:

	MP3	OGG
Google Chrome	Oui	Oui
Safari	Oui	Non
Internet Explorer	Oui	Non
Mozilla Firefox	Oui	Oui
Opera	Non	Oui

Afin de résoudre ce problème, HTML5 propose la balise <source> que l'on déclare au sein de la balise <audio>. Donc, l'attribut src ne sera plus utile.

Le code ressemblerait à ceci:
Vous avez sûrement compris qu'on doit disposer de deux fichiers pour le même contenu audio, un au format MP3 et l'autre au format OGG. Le navigateur décide donc de charger l'un ou l'autre selon sa compatibilité.

loop

L'attribut loop désigne le nombre de fois que la piste sera répétée. la valeur -1 désigne à l'infini.

autoplay

L'attribut autoplay est un attribut booléen. Le fait de le déclarer sous entend autoplay=true. Il permet de lancer automatiquement la lecture de la piste audio après le chargement de la page.

controls

L'attribut controls est un attribut booléen qui permet d'afficher les bouton de contrôle (play, pause, volume...) sur la boite de lecture de la piste audio.

autobuffer

L'attribut autobuffer est un attribut booléen qui ordonne au navigateur de bufferiser automatiquement le contenu après le chargement de la page. Bufferiser signifie que le contenu sera téléchargé même si le client n'a pas lancé la lecture de la piste.

Balise <video>

La balise <video> permet d'intégrer une piste vidéo au sein de la page Web. A l'instar de la balise <audio> elle dispose des même attributs, mais des attributs supplémentaires peuvent s'y appliquer.

Attributs width et height

Ces deux attributs classiques au HTML, désignent la largeur et la hauteur de la fenêtre de visualisation de la vidéo. Ils sont exprimés en pixel qui est implicite (ou en pourcentage pour la largeur).

Attribut poster

L'attribut poster permet d'afficher une image au lieu de la vidéo si celle ci ne tourne pas. Elle accepte comme valeur le chemin (relatif ou absolu) de l'image.

Attribut src

L'attribut src permet de spécifier la source de la piste vidéo souhaitée. Cependant, le problème de compatibilité soulevé pour la balise <audio> subsiste aussi pour la balise <video>, à savoir, le format du fichier contenant la vidéo.

Les formats vidéo valables en HTML5 sont:

• MP4: connu aussi sous le nom de H264. Il est célèbre pour sa qualité d'image irréprochable. Cependant, il ne s'agit pas d'un format totalement gratuit.
• WebM: développé par Google, il dispose aussi d'une très bonne qualité d'image.
• OGG Theora: il s'agit d'un codec open source développé par Mozilla Fondation. Il dispose d'une bonne qualité d'image mais moins bonne que H264 et WebM. Mais elle est adaptée au Web.

Le tableau suivant illustre la compatibilité des formats vidéo (approuvés pour HTML5) avec les navigateurs célèbres:

	MP4	WebM	OGG
Google Chrome	Oui	Oui	Oui
Safari	Oui	Non	Non
Internet Explorer	Oui	Oui	Non
Mozilla Firefox	Non	Oui	Oui
Opera	Oui	Oui	Oui

Pour résoudre ce problème de compatibilité, la solution utilisée pour la balise <audio> est reprise ici. Il s'agit de l'introduction de la balise <source> dans la balise <video>.

Exemple de code:

Intégration du contenu multimédia avec HTML en vidéo