Tutoriel HTML - sommaire

HTML5 et le multimédia

Il y a encore quelques années, pour insérer un fichier audio ou vidéo sur un site, il fallait utiliser le plugin Flash Player.
Désormais il suffit d'utiliser les balises AUDIO & VIDEO de la norme HTML 5. D'ailleurs le module Flash Player n'est plus supporté par les navigateurs récents.

La balise FIGURE

Il faut en général utiliser la balise AUDIO ou VIDEO conjointement avec la nouvelle balise FIGURE.

Le conteneur FIGURE peut être utilisé pour regrouper des éléments tels une image et sa légende OU une vidéo et son titre OU un fichier audio avec une image et une légende.
Le conteneur FIGURE inclut l'élément FIGCAPTION.
Les balises FIGURE et FIGCAPTION sont nativement de type block et sont des balises doubles.

Le CSS de la page

Il faut paramétrer les balise figure & figcaption qui sont en général utilisées conjointement avec les balises multimédia : video & audio
Donc la feuille de style interne est : figure {width : 80% ; margin : 10px auto ; border : 1px solid black ;} figcaption {font-style : italic ; font-weight : bold ; text-align : center;}

Utilisation de FIGURE - exemple 1

Le code correspondant : <figure> <img src = '../images/riviere.jpg' class ="centre"> <figcaption>Naissance d'un fleuve</figcaption> </figure>

Le conteneur FIGURE peut comprendre plusieurs images

Les images sont deux de front du fait de l'emploi de la classe gauche.
Le code correspondant : <figure> <img src = '../images/html5_logo.png' class ="gauche"> <img src = '../images/css3_logo.jpg' class ="gauche"> <img src = '../images/javascript_logo.png' class ="gauche"> <img src = '../images/svg_logo.png' class ="gauche"> <figcaption>Les différents logos des langages de la programmation web</figcaption> </figure>

La balise VIDEO

Problèmatique technique

Faire un lien à partir de votre site (code HTML fourni par l'hébergeur) vers cette vidéo hébergée par YouTube ou DailyMotion est une solution technique simple. Mais le visiteur devra supporter des annonces publicitaires. Et si la vidéo est supprimée du site ...

Avant HTML5 l'incorporation d'une vidéo (fichier vidéo dans le site) était très compliquée. Il fallait utiliser un 'plugin' comme flash player ou quicktime.
Il y avait une autre solution : utiliser la balise object qui demandait beaucoup de paramètres obscurs ...
Donc la balise VIDEO est la bienvenue.

Pour que le navigateur puisse lire une vidéo il doit disposer du codec correspondant au format de la vidéo. Or il y a peu de temps, seul le navigateur Chrome avait intégré tous les codec ...
Cette situation aboutissait à devoir proposer deux formats (deux fois la balise source) dans le conteneur VIDEO pour que votre vidéo puisse être lue par n'importe quel navigateur récent !
J'emploie le passé car désormais tous les navigateurs récents reconnaissent les formats vidéo les plus courants.

Préchargement de la vidéo

Il est possible de demander le préchargement OU pas de la vidéo. Il suffit de jouer sur l'attribut preload.

Vidéo préchargée

La première image de la vidéo est affichée !
Le code correspondant : <figure> <video controls preload ='auto' src = "../bio/audio_video/anguilles_jardinieres.mp4" > <figcaption>Les anguilles jardinières</figcaption> </figure>

Vidéo non préchargée

Le cadre est vide. Dans ce cas il est préférable d'utiliser l'attribut poster ; voir ci-dessous.
Le code correspondant. <figure> <video controls preload ='none' src ="../bio/audio_video/cachalot.mp4"> <figcaption>Le Cachalot : le plus grand cétacé à dents</figcaption> </figure>

Vidéo non préchargée avec affichage d'une image par défaut

Dans la balise VIDEO j'ai rajouté l'attribut : poster ="../bio/images_bio/cachalot.jpg"

Les différents attributs de la balise VIDEO

Le conteneur VIDEO a d'autres attributs que preload :
• poster : image affichée tant que la vidéo n'a pas démarré
• autoplay : démarrage automatique de la vidéo (preload ='auto' devient donc inutile ...)
• loop : exécuter en boucle
• width
• height
• controls : barre de contrôle native du navigateur (dont le bouton "plein écran")

Précharger ou pas ?

Attention lorsqu'une page contient de nombreuses vidéos il est peu probable que le visiteur veuille toutes les regarder.
Si pour toutes ces vidéos l'attribut preload est à auto alors le chargement de la page risque d'être long, ... très long : mise en cache de toutes les vidéos. Or preload ="auto" c'est la valeur par défaut !
Je vous conseille donc d'écrire pour chaque vidéo : preload ="none" ; il faut mieux proposer une image par défaut avec l'attribut poster = "source de l'image" sinon vous avez un cadre vide.

La balise AUDIO

Vous vous en doutez, cette balise permet d'insérer un fichier audio en particulier les fichiers mp3. Mais il existe d'autres formats de fichiers audio.

Exemple d'utilisation de la balise AUDIO

Le code correspondant : <figure> <img src ='../images/foret.jpg' class ="centre" > <audio preload ="none" controls src = "../bio/audio_video/automne.mp3" > <figcaption>Légende d'automne</figcaption> </figure>

La balise AUDIO dispose (comme la balise VIDEO) des attributs loop (exécuter en boucle), autoplay (démarrage automatique), controls et preload. Par contre elle ne dispose pas de l'attribut poster. C'est pour cette raison que dans le code ci-dessus j'ai utilisé l'élément IMG à l'intérieur du conteneur FIGURE.