HTML5 – Balises pour média

LEÇON

 

ATTENTION : balises video et audio valables seulement à partir de HTML5. Donc susceptibles d'être problématiques si une partie de l'audience du site risque de ne pas avoir un navigateur compatible avec cette balise (par exemple IE7, IE8) - voir HTML5Test : Video/Audio Element Compatible Browsers.

 

Balise vidéo : <video>

Remarque : Avant HTML5, l'inclusion de vidéo dans une page web se faisait typiquement avec un plug-in type Adobe Flash et la balise <object>.

Exemple de la balise vidéo :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 VIDEO</title>
  </head>
  <body>
    <video width="640" height="480" controls>
      <source src="http://www.web-design-codex.fr/samples/video/small.webm" type="video/webm">
      <source src="http://www.web-design-codex.fr/samples/video/small.ogv" type="video/ogg">
      <source src="http://www.web-design-codex.fr/samples/video/small.mp4" type="video/mp4">
      <source src="http://www.web-design-codex.fr/samples/video/small.3gp" type="video/3gp">
      Avertissement HTML5 : Votre navigateur ne peut pas afficher ce contenu.
    </video>
  </body>
</html>

[ remerciements : techslides.com ]

 

Quelques attributs de la balise <video>

controls : si présent, afficher les contrôles de lecteur vidéo

preload="auto" / "none" : si oui ou non la vidéo doit être chargée avec la page (ignoré si autoplay="true")

autoplay="true" / "false" : si oui ou non la vidéo doit démarrer sans interaction de la part de l'utilisateur. Prudence s'il y a plusieurs vidéos sur la page !

poster="vignette.jpg" : permet d'afficher une vignette avant le lancement de la vidéo

loop="true" / "false" : si oui ou non la lecture se fait en boucle

Plus d'infos : Référence W3Schools

 

Balise audio : <audio>

Le même principe que la balise video.

Exemple :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 AUDIO</title>
  </head>
  <body>
    <audio controls>
      <source src="http://www.web-design-codex.fr/samples/audio/ACDCBackInBlack.ogg" type="audio/ogg">
      Avertissement HTML5 : Votre navigateur ne peut pas afficher ce contenu.
    </audio>
  </body>
</html>

[ remerciements : ACDC ]

Remarque : si on enleve l'attribut "controls" de la balise audio normalement le lecteur disparaît. Ensuite si on ajoute autoplay="true" dans cette même balise audio le son devrait démarree tout seul. Voilà donc une façon d'ajouter une piste audio d'ambiance à un site. Essayez !

 

La balise <track>

Permet la spécification de pistes texte (piste sous-titres par exemple) pour un élément vidéo ou audio.

Bien à connaître mais l'implémentation dans les navigateurs n'est pas encore universelle pour cette balise (remarque août 2014).

Exemple :

 <video width="640" height="480" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.ogg" type="video/ogg">
  <track src="myvideo_soustitres_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="myvideo_soustitres_fr.vtt" kind="subtitles" srclang="fr" label="Français">
</video>

 


EXERCICES

  1. Télécharger et stocker localement un petit fichier vidéo. Noter les dimensions. Créer un document HTML avec une balise vidéo pour chaque vidéo. Laisser la balise video sans attribut pour voir le comportement par défaut.
  2. Mettre ensuite les dimensions (width/height) dans la balise video. D'abord, les dimensions réelles. Ensuite les dimensions supérieures, inférieures et même avec distorsion. A chaque étape voir l'affichage. Essayer dans plusieurs navigateurs.
  3. Mettre ensuite les contrôles. Essayer dans plusieurs navigateurs pour voir les contrôles proposés.
  4. Tester les autres attributs pour vous familiariser (preload, autoplay, poster, loop). Regarder la référence W3Schools et tester d'autres attributs de la balise video.
  5. Créer une autre page cette fois ci avec une balise audio et un fichier audio.
  6. Tester le comportement par défaut, l'affichage des contrôles dans différents navigateurs, et se familiariser avec les balises comme autoplay, et cetera.
  7. Créer une page web avec uniquement une image de fond et une ambiance audio (en utilisant la méthode balise audio). L'image et l'ambiance devraient être cohérentes (par exemple une image de l’Amazonie et un fichier audio avec des oiseaux tropicaux). Conseil : trouver le fichier audio avant de se décider sur le thème de la page car ils sont plus difficiles à trouver que les images.