Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Il y a encore quelques années, pour insérer un fichier audio ou vidéo sur un site, il fallait proposer le plugin Flasplayer.
Désormais il suffit d'utiliser les balises AUDIO & VIDEO de la norme HTML 5. D'ailleurs Flashplayer n'est plus supporté par les
navigateurs.
La feuille de style de cette page :
Définition des deux classes utilisées dans le code HTML de la page :
Il faut en général utiliser la balise AUDIO ou VIDEO conjoitement 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.
La balise FIGURE peut inclure la balise FIGCAPTION.
Les balises FIGURE et FIGCAPTION sont nativement de type block !
Le code correspondant :
Les images sont deux de front du fait de l'emploi de la classe gauche.
Le code correspondant :
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.
Il est possible de demander le préchargement OU pas de la vidéo. Il suffit de jouer sur l'attribut preload.
La première image de la vidéo est affichée !
Le code correspondant :
Le cadre est vide !
Le code correspondant :
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 : 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". 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").
Vous en doutez, cette balise permet d'insérer un fichier audio en particulier les fichiers mp3. Mais il existe d'autres formats ...
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 de l'attribut poster.