HTML5: pour mieux présenter vos pages Web

Auteur: Mohamed CHINY Durée necessaire pour le cours de HTML5: pour mieux présenter vos pages Web Niveau recommandé pour le cours de HTML5: pour mieux présenter vos pages Web Supports vidéo disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz disponible pour ce cours

Page 5: Integration de l'audio et la vidéo en HTML5

Toutes les pages

HTML5: pour mieux présenter vos pages Web

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:

MP3OGG
Google ChromeOuiOui
SafariOuiNon
Internet ExplorerOuiNon
Mozilla FirefoxOuiOui
OperaNonOui

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:
<audio>
   <source src="piste.mp3" />
   <source src="piste.ogg" />
</audio>
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:

MP4WebMOGG
Google ChromeOuiOuiOui
SafariOuiNonNon
Internet ExplorerOuiOuiNon
Mozilla FirefoxNonOuiOui
OperaOuiOuiOui

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:
<video width="400" height="300" controls autoplay poster="poster.png">
   <source src="video.mp4" />
   <source src="video.webm" />
   <source src="video.ogv" />
</video>
La déclaration de l'attribut controls permet au navigateur d'afficher les boutons de contrôle du lecteur (audio ou vidéo). Cependant, chaque navigateur dispose de ses propres boutons. Pour que le site aie le caractère professionnel, il faut songer à unifier le design des boutons. La solution consiste donc à développer ses propres boutons et les programmer ensuite à l'aide du langage Javascript.

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



Quiz (Pour tester vos connaissances)
  1. Parmi les formats audio suivants, lequel ne peut être lu (sans plugin) par aucun navigateur compatible HTML5?
RM
MP3
OGG
  1. Si sur une page Web on souhaite intégrer 20 balises <audio>. Serait-il judicieux de déclarer sur chacune d'elles l'attribut autobuffer?
Oui
Non
  1. Si le code ci-après est exécuté par une version récente d'un navigateur compatible HTML5, que se passera-t-il?
    <video src="video.ogv">
       Lecture.
    </video>
Le message 'Lecture' sera affiché en dessus de la vidéo
Le message 'Lecture' sera affiché en dessous de la vidéo
Le message 'Lecture' sera affiché à la place de la vidéo en attendant que le téléchargement de celle-ci soit terminé
Le message 'Lecture' ne s'affichera pas
  1. Le format MP3 n'est pas reconnu par tous les navigateurs compatibles HTML5.
Oui
Non
  1. A quoi sert l'attribut poster de la balise <video>?
Affiche une image à la place de la vidéo si celle ci n'est pas lancée.
Affiche les boutons de contrôle du lecteur vidéo.
Lance automatiquement la lecture de la vidéo une fois la page chargée.
Lance la lecture de la vidéo en plein écran