Une balise tant attendue par les développeurs web : la balise vidéo

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 30 secondes de publicité ...

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 ...

La balise video de HTML5 est donc la bienvenue. Il y avait cependant un petit bémol ...
Pour que le navigateur puisse lire une vidéo il doit disposer du codec correspondant au format de la vidéo. Or 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 bonne nouvelle j'ai constaté au que la dernière version de Firefox est désormais capable de lire les vidéos au format mp4. Donc il ne sera plus nécessaire dans un futur proche de proposer deux sources à la balise video. C'est d'ailleurs ce que je fais dans mon code. Donc les utilisateurs de Firefox qui n'arrivent pas à lire les vidéos de cette page savent qu'ils doivent installer une version plus récente du navigateur.

Quand vous lisez en streaming une vidéo à partir de Firefox il est très facile de télécharger cette vidéo au format mp4.
A condition que vous ayez installé une extension : video DownloadHelper.

La balise VIDEO

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 correspondant

... <style> figure {width : 50% ; margin : 20px auto 20px auto ; } video {width :90%; } figcaption {text-align : center ; font-weight :bold;} ... <body> <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> ...

La balise video contenue dans figure (balise nativement de type bloc).
Dans le cadre du "responsive web design" les largeurs des éléments sont exprimées en % !

De la bonne utilisation de cette balise

Les différents attributs

Remarquez que certains attributs n'ont pas de valeur : loop, controls, autoplay.
A partir du moment qu'une seule source vidéo peut être lue par tous les navigateurs il n'est plus nécessaire d'utiliser à l'intérieur du conteneur video la balise source. Il suffit d'utiliser dans la balise video l'attribut src pour préciser le chemin relatif vers le fichier vidéo.

Valeur de preload ?

Attention lorsqu'une page contient de nombreuses vidéos il est peu probable que le visiteur va 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").
Retour menu