Accueil
Mes tutoriels sur la programmation

Tutoriel HTML - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

HTML5 et le multimédia

Avec HTML5 Flash player devient totalement inutile. D'ailleurs il n'est par ailleurs plus possible d'exécuter Flash Player depuis le 12 janvier 2021.
En effet la norme HTML5 propose la balise AUDIO et la balise VIDEO.

Pour info

La feuille de style de cette page :

 
	img, audio {display : block ; margin : 10px auto 10px auto ;  }
	figure {width : 80% ; margin : 10px auto 10px auto ; border : 1px solid black ;}
	figcaption {font-style : italic ; font-weight : bold ; text-align : center;}
	img.grand {display : block ; width : 80%; margin : 5px auto 5px auto; }

La balise AUDIO

Pour que le navigateur puisse lire un fichier audio il doit disposer du codec correspondant au format de la vidéo. Or il y a encore peu, seul le navigateur Chrome avait intégré tous les codec ...

J'emploie le passé car désormais tous les navigateurs récents intègrent les différents codec et en particulier le format mp3.

Exemple d'utilisation d'un fichier audio

Le code correspondant

Le code CSS :

	img, audio {display : block ; margin : 10px auto 10px auto ;  }

La balise audio n'est pas nativement de type block. Il faut donc la transformer en boîte (display :block) pour que le centrage horizontal (avec "margin:auto") soit effectif.

Le code HTML :

<img src ='../images/foret.jpg' width ='80%'> <audio controls > <source src = "../audio_video/automne.mp3" > <p>votre navigateur est obsolète et ne peut lire le fichier audio</p> </audio>

La balise AUDIO ne dispose pas (à la différence de la balise VIDEO) des attributs width, height, poster.
Par contre la balise AUDIO dispose (comme la balise VIDEO) des attributs loop (exécuter en boucle), autoplay (démarrage automatique), controls et preload

La balise FIGURE de HTML5

Il faut en général utiliser la balise AUDIO ou VIDEO 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, etc.
Le conteneur FIGURE contient entre autres la balise FIGCAPTION.
Les balises FIGURE et FIGCAPTION sont nativement de type block !

Exemple 1 : image et sa légende

Naissance d'un fleuve

Exemple 2 : musique et son titre

Légende d'automne

Le code HTML correspond

<h2>Exemple 1 : image et sa légende</h1> <figure> <img src = '../images/riviere.jpg' class ="grand"> <figcaption>Naissance d'un fleuve</figcaption> </figure> <h2>Exemple 2 : musique et son titre</h2> <figure> <img src ='../images/foret.jpg' class ="grand"> <audio controls> <source src = "../audio_video/automne.mp3" > <source src = "../audio_video/automne.ogv" > </audio> <figcaption>Légende d'automne</figcaption> </figure>

Notez la disposition harmonieuse de l'image et de sa légende.

Dans le cadre d'un site adaptatif les largeurs des balises figure, img sont exprimées en % !
Le conteneur figure peut être utilisé aussi pour intégrer une vidéo.

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 différents formats vidéo.

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.

Ci-dessous une vidéo préchargée


l'attribut preload est à auto.
PMT à Strouanne (baie de Wissant)

La première image de la vidéo est affichée !

Ci-dessous une vidéo qui n'est pas préchargée


l'attribut preload est à none.
Dauphins en pleine eau : Safaga - mai 2015

Un cadre vide ...

Le code HTML correspondant

... <figure> <video controls preload ='auto'> <source src = "../audio_video/saintpo2.mp4" > </video> <figcaption>PMT à Strouanne (baie de Wissant)</figcaption> </figure> <figure> <video controls preload ='none' src ="../audio_video/dauphins.mp4" ></video> <figcaption>Dauphins en pleine eau : Safaga - mai 2015</figcaption> </figure> ...

Les différents attributs de la balise

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 très long ...
Or preload ="auto" c'est la valeur par défaut !
Je vous conseille donc d'écrire pour chaque vidéo : preload ="none". Dans ce cas il faut mieux proposer une image comme poster sinon vous avez un cadre vide comme vous pouvez le constater pour la deuxième vidéo de cette page (preload ="none").