alainericgauthier.com

construire une présence sur le web

Apprendre HTML5 : images et média

Web

Vous le savez, vous le voyez à tous les jours, une page web ne contient pas seulement du texte. À moins que vous n'ayez passé les 10 dernières années dans une grotte sur une île déserte, vous avez sûrement remarqué que certains sites web sont en fait des pages pleine d'images et de vidéo. Et les podcasts et la musique occupent aussi une place non négligeable sur le web.

Comment faire pour intégrer ces médias à vos pages web?

D'un certains point de vue, il n'y a pas de différences entres des documents HTML et des fichier médias. Tout comme pour les document HTML, les fichiers images, audio et vidéo doivent être entreposés sur un serveur.

Et comme c'est le cas pour les liens entre les pages, voir article précédent à propos des hyperliens, les URL relatifs sont très importants pour les fichiers multimédias.

Insérer des images

Vous le savez sûrement, vous pouvez insérer des images dans votre texte. Pour ce faire, vous utiliserez l'élément <img>.. Cet élément a une particularité que nous n'avons pas encore vu précisément, c'est un élément vide. Et qu'est-ce que ça veut dire? Simplement qu'il ne peut pas contenir du texte et que la façon correcte de le mettre en HTML est de mettre la barre oblique de fermeture, le slash en bon français, dans la balise d'ouverture.

<img />

Évidemment, cet élément accepte tous les attributs universels (voir article précédent) et il accepte aussi des attributs qui lui sont spécifiques.

L'attribut alt

Le contenu de cet attribut sera utilisé pour afficher une description de l'image si jamais celle-ci ne pouvait être affichée dans la page. Une image ne s'affichera pas dans une page s'il y a un problème technique, si le navigateur ne supporte pas un format d'image, si votre URL est brisée ou encore si le visiteur a désactivé l'affichage d'images dans son propre navigateur. Mais encore plus important, il existe des navigateurs spécialisés pour les personnes ayant un handicap visuel et pour ces personnes, le contenu de l'attribut alt est très important. Ces navigateurs liront à l'usager le contenu de cet attribut pour que le visiteur sache ce que contient l'image. Selon la norme HTML5, cet attribut doit être présent.

L'attribut src

Le contenu de cet attribut est un URL absolu ou relatif et il pointe vers un fichier image (GIF, JPG, PNG). Si cet URL n'est pas exact, l'image ne sera pas affichée. Selon la norme HTML5, cet attribut doit être présent. À quoi bon ajouter un élément image à un document HTML si ce n'est pas pour ajouter une image à la page?

L'élément <audio>

Il n'y a pas si longtemps, pour intégrer un fichier audio à une page web, il fallait créer un objet en FLASH ou encore utiliser de la programmation en JS et espérer que le visiteur aurait un lecteur audio compatible sur son ordinateur. Bien que la situation actuelle ne soit pas parfaite, il est beaucoup plus facile d'intégrer de l'audio sur une page web. Il faut simplement être conscient de quelques particularités au niveau de la compatibilité des fichiers audio.

De plus, il ne faut pas oublier que la navigation sur le web, c'est encore une activité silencieuse et c'est une bonne chose. Cela vous est sûrement arrivé, la dernière fois que vous avez utilisé votre ordinateur le volume était assez fort et vous avez oublié de le réduire. Vous arrivez sur une page web et un fichier audio démarre automatiquement. Cette situation est déjà désagréable mais imaginez que vous êtes dans une bibliothèque au moment où ça vous arrive...

La philosophie adéquate avec les médias est de laisser le contrôle à l'utilisateur.

Contrairement à l'élément image, l'élément audio accepte du texte entre ces balises d'ouverture et de fermeture. Dans la plupart des cas, le texte qu'on y ajoute est un message expliquant que ce navigateur n'est pas compatible avec l'élément audio.

La plupart des programmeurs pensent en programmeur et vont mettre un message du genre "Votre navigateur ne supporte pas l'élément audio." Mais pour une personne qui ne connait rien au développement web, ce message ne donne pas beaucoup d'information. Il serait plus utile d'offrir une alternative de solution.

Par exemple,

Votre navigateur n'est pas en mesure de jouer ce fichier audio à même la page mais vous pouvez le télécharger à cette adresse :
<a href="http://exemple.com/audio.wav">http://exemple.com/audio.wav</a>.

L'intégration la plus simple

Pour insérer un fichier audio dans votre page web, il vous faut à tout le moins le code suivant pour que ce soit utile à vos visiteurs :

<audio src="http://exemple.com/audio.wav">
  Votre navigateur est un incapable car il ne peut pas jouer ce fichier audio à même la page. Vous n'aurez d'autre choix que de le télécharger à cette adresse :
  <a href="http://exemple.com/audio.wav" title="Un fichier audio">http://exemple.com/audio.wav.</a>
</audio>

Les attributs

L'élément audio est supporté par les navigateurs depuis assez longtemps. C'est Internet Explorer qui a ajouté le support le plus récemment avec la version 9. Donc, si vous devez créer des pages web compatibles avec une version inférieure à IE 9, vous devrez absolument mettre en place une alternative.

Il existe 4 attributs principaux pour l'élément audio. De plus, leur support par les navigateurs est identique à l'élément audio lui-même. Ces quatre attributs vous permettront passablement de contrôle sur le comportemtn des lecteurs audio dans vos pages web.

src

Nous verrons plus loin qu'il y a une autre façon de lier un fichier audio à un lecteur mais cet attribut se comporte exactement de la même manière que pour l'élément img.

Les trois attributs suivant sont des attributs booléens. Qu'est-ce que c'est que des attributs booléens? En gros, les attributs booléens indiquent si un état est vrai ou faux. Comme les programmeurs aiment bien prendre des raccourcis, les attributs booléens pour les éléments HTML5 se comportent comme suit. Si l'attribut est présent, c'est que cet état est vrai et si l'élément est absent, c'est que cet état est faux.

Il est donc inutile de mettre quelque chose comme autoplay="false".

autoplay

Si cet attribut est présent dans la balise d'ouverture de l'élément audio, le fichier audio se mettra à jouer dès que le navigateur sera prêt. Comme mentionné plus haut, aussurez-vous que pour le visiteur, accéder à une page qui contient un fichier audio qui démarrera automatiquement ne sera pas une mauvaise surprise.

<audio autoplay src="test.wav">
Erreur: quelque chose de terrible s'est produit.
</audio>

controls

Évidemment, quand on voit un lecteur audio sur le web, on s'attend à avoir un minimum de contrôle sur celui-ci. L'attribut controls, lorsque présent, donnera au minimum à l'utilisateur les contrôles suivants:

  • Jouer
  • Pause
  • Volume

Voici un exemple de l'intégration de l'attribut controls.

<audio controls src="panique.wav">
  Il y a un problème avec votre navigateur, vous pouvez maintenant paniquer.
</audio>

loop

Pour un raison ou pour une autre, vous pourriez avoir une irrésistible envie de faire jouer un fichier en boucle. Pour ce faire, la présence de l'attribut loop permet justement de faire jouer ce fichier en boucle.

<audio loop src="boucle.wav">
  Savez-vous lacer vos souliers? Votre navigateur ne sait pas faire des boucles.
</audio>

Compatibilité des formats audio

Finalement, comme si savoir tout cela n'était pas suffisant, Tous les navigateurs ne supportent qu'un seul format de fichier audio, le format MP3. Il existe 2 autres format principaux: ogg et wav. Mais ces formats ne sont pas universels.

Si vous voulez tout de même supporter ces formats, vous aurez donc à offrir plus d'options à vos visiteurs à l'aide d'un autre élément: <source>

Navigateur MP3 WAV OGG
Tableau de compatibilité des formats audio
Internet Explorer Oui Non Non
Chrome Oui Oui Oui
Firefox Oui Oui Oui
Safari Oui Oui Non
Opera Oui Oui Oui

L'élément <source>

Cet élément est utilisé à l'intérieur des balises audio ou video.

Il offre différentes options aux navigateurs qui sont programmés pour faire le meilleur choix en fonction de la situation et des contraintes de comptabilités.

Les attributs

Cet élément utilise deux attributs principaux.

src

Tout comme pour les images et l'élément audio lui-même, cet attribut indique un URL pointant vers un fichier audio. Dans l'élément source, cet attribut est obligatoire.

type

Cet attribut n'est pas obligatoire mais si vous le spécifiez, le chargement de votre page sera un peu plus rapide. Tout ce que vous avez à faire est d'ajouter cet attribut et le type de média en vous fiant au tableau suivant :

Format Type
Type MIME par format audio
MP3 audio/mpeg
Ogg audio/ogg
WAV audio/wav

Un dernier exemple avec le plus d'options possibles pourrait ressembler à ceci :

<audio controls loop autoplay>
  Tout cela ne me dit rien qui vaille. <a href="exemple.mp3">Allez voir ailleurs si j'y suis</a>.
  <source src="exemple.wav" type="audio/wav">
  <source src="exemple.ogg" type="audio/ogg">
  <source src="exemple.mp3" type="audio/mpeg">
</audio>

L'élément <video>

L'élément video ressemble beaucoup à l'élément audio dans son implémentation. Mis à part le fait qu'il offre quelques attributs de plus, le principe est à peu près le même.

Pour intégrer une vidéo dans une page de la manière la plus simple, ce code suffit :

<video src="unevideodechaton.webm" controls>
  Votre navigateur est pathétiquement incompatible et horriblement retardé. Heureusement, j'ai pensé à vous et vous pouvez télécharger <a href="unevideodechaton.webm">ma super vidéo de chaton</a>.
</video>

Les attributs

L'élément video utilise les mêmes attributs que l'élément audio et il en offre quelques autres.

src

Comme pour l'élément audio, la valeur de cet attribut pointe vers un fichier vidéo dans un format compatible avec les navigateurs. Nous verrons plus bas les différents formats que tolère chacun des principaux navigateurs.

controls

Tout comme pour l'élément audio, il est préférable d'offrir à vos visiteurs une forme de contrôle sur le défilement de la vidéo. Les contrôles sont:

  • Play
  • Pause
  • Volume

Certains navigateurs peuvent offrir d'autres contrôles, cela dépend du navigateur et de la version.

autoplay

Permet de démarrer la vidéo automatiqment. Veuillez noter qu'en date de publication, cet attribut ne fonctionne pas pour les appareils mobiles.

height and width

Il est possible de modifier la hauteur ou la largeur originale de la vidéo. Si vous spécifiez les deux, attention de préserver la proportion sinon vous allez modifier la géométrie de l'image.

poster

La valeur de cet attribut pointe vers un fichier image qui servira de vignette qui s'affiche quand la vidéo n'est pas encore en mode lecture.

loop

La présence de cet attribut indique que la vidéo doit jouer en boucle.

muted

La présence de cet attribut indique que le volume de la vidéo (ou le contrôle mute) est à 0. Il n'y aura donc pas de son quand la vidéo démarre.

<video src="unevideodechaton.webm" controls height="250px" poster="chaton.jpeg" autoplay muted loop>
Vous avez pensé à installer un navigateur plus récent? Les mises à jour sont gratuites... Je vous permets, malgré tout, de télécharger <a href="unevideodechaton.webm">ma super vidéo de chaton</a>.
</video>

Compatibilité des formats vidéo

Tout comme pour les fichiers audio, les différents format video ne font pas tous l'unanimité parmi les navigateurs.

Navigateur MP4 WebM Ogg
Compatibilité des formats video
Internet Explorer Oui Non Non
Chrome Oui Oui Oui
Firefox Oui Oui Oui
Safara Oui Non Non
Opera Oui Oui Oui

Comme vous avez pu le voir dans le dernier tableau, Internet Explorer et Safari ne supportent pas tous les formats principaux de vidéo. En utilisant l'élément source de la même manière que pour l'élément audio, il est possible d'offrir au navigateur une alternative.

L'élément <vidéo> et l'élément <source>

Tout comme pour l'élément audio, si vous spécifiez le type de vidéo avec l'attribut type, vous accélérez le choix de la vidéo pour le navigateur.

Format Type
Format video et leur type MIME
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Voici le code pour la même vidéo que dans l'exemple du début de cette section mais offerte en différents formats.

<video controls height="250px" poster="chaton.jpeg" autoplay muted loop>
  <source src="unevideodechaton.webm" type="video/webm">
  <source src="unevideodechaton.ogg" type="video/ogg">
  <source src="unevideodechaton.mp4" type="video/mp4">
Vous avez pensé à installer un navigateur plus récent? Les mises à jour sont gratuites... Je vous permets, malgré tout, de télécharger <a href="unevideodechaton.webm">ma super vidéo de chaton</a>.
</video>

Un des plus grand avantage d'HTML5 est de prendre en charge la lecture des fichiers mutlmédia. Auparavant, la prise en charge de la video et du son était la responsabilité des systèmes d'opération. Ce qui causait bien des soucis aux développeurs web car on ne pouvait jamais avoir la certitude que notre contenu allait être compatible avec les différents navigateurs de tous nos visiteurs.

Comme les développeurs de navigateur prennent maintenant en charge la lecture de ces types de fichiers et que la comptabilité est clairement définie et qu'elle est la même peu importe la plateforme, cela rend la création de page web beaucoup plus simples.

De plus, avec les années, deux format ont vraiment pris la première place:

  • mp3 pour les fichiers audio
  • mp4 pour les fichiers vidéo

Mais sachez qu'à l'apparition des éléments video et audio dans les navigateurs, aucun des formats n'était supporté par tous les navigateurs, il aura fallut quelques années pour voir un format commun accepté par les navigateurs principaux.

Ceci dit, la meilleure pratique reste encore l'utilisation de l'élément source pour offrir des options aux visiteurs qui ont des navigateurs un peu moins à jour.

Et finalement, ne soyez pas aussi sarcastiques que moi avec votre code...

Sources (en anglais) :