Introduction

Il peut être très intéressant de mettre des vidéos sur votre site internet, car c'est très apprécié des moteurs de recherche. Je pense aussi que de plus en plus de personnes affectionnent l'audio et la vidéo au détriment de l'écrit.
D'accord, mais comment faire ? Deux possibilités s'offrent à vous : héberger vous-même la vidéo ou l'héberger chez quelqu'un d'autre.

La vidéo est hébergée sur notre site.

Les contrôles du lecteur

Dans le cas où la vidéo est dans les dossiers de notre hébergement, nous allons utiliser la balise `vidéo` qui possède une balise fermante ainsi que plusieurs attributs pour insérer des vidéos dans votre page web.

Dans le cas de figure suivant, nous allons utiliser la balise `video` ainsi que l'attribut `src` pour indiquer le chemin du fichier :

<video src="resources/html-video-test.mp4"></video>

Mais dans ce cas de figure, vous vous apercevrez que nous n'avons aucun moyen visible de contrôler la vidéo et il faut faire un clic droit (sous Firefox) pour la démarrer.  Nous allons changer cela en rajoutant l'attribut `controls` :
<video controls src="resources/html-video-test_1.mp4"></video>


Omettre l'attribut `controls` peut être volontaire si on souhaite le gérer grâce à JavaScript.

Lancement automatique

Il faut savoir que le lancement automatique d'une vidéo n'est pas toujours quelque chose de bien pour l'expérience utilisateur. Mais dans certains cas, cela peut-être intéressant.

Pour faire cela, on va utiliser l'attribut « autoplay ». Cela donne :

<video controls autoplay src="resources/html-video-test.mp4"></video>



Jouer la vidéo en boucle

Il est tout à fait possible de faire en sorte que la vidéo tourne en boucle : 

<video controls loop src="resources/html-video-test_1.mp4"></video>

On peut aussi très bien cumuler les attributs : 

<video  controls autoplay loop src="resources/html-video-test_1.mp4"></video>


Les dimensions du lecteur

On peut vouloir lui donner une dimension précise que cela soit en hauteur ou en largeur et cette dimension s'exprime en pixel. Cependant, je ne conseille pas de donner une hauteur et une largeur, il vaut mieux n'indiquer que l'un des deux, car le lecteur va régler la vidéo de façon proportionnelle, sinon, on risque d'obtenir un lecteur plus grand que la vidéo et selon les cas, cela peut ne pas être très joli.

<video controls src="resources/html-video-test.mp4" width="500"></video>


Les différents formats de fichiers

Les navigateurs web ne prennent pas forcément en charge tous les formats vidéos. Il va donc falloir prendre ce problème en considération en hébergeant plusieurs versions de votre vidéos avec des codecs différents. L'élément `<source>` va nous permettre de gérer cela, en indiquant plusieurs vidéos alternatives.

<video controls width="500">
     <source src="resources/html-video-test.webm" type="video/webn">
     <source src="resources/html-video-test.ogg" type="video/ogg">
     <source src="resources/html-video-test.mp4" type="video/mp4">
 </video>


Afficher une image avant démarrage de la vidéo

Comme vous avez certainement pu le constater avec le fichier vidéo de mon tutoriel sur mon compte GitLab, la visualisation de la vidéo peut ne pas afficher une image très parlante. Pour remédier à cela, on va pouvoir afficher une image avant que la vidéo ne se lance. 

<video controls poster="resources/html-video-test-image.png" src="resources/html-video-test_1.mp4"></video>


Couper le son d'une vidéo au démarrage

On peut vouloir laisser à l'utilisateur la capacité de mettre du son à une vidéo.  On va principalement utiliser cette fonction avec le lancement automatique de la vidéo. Pour se faire, on va utiliser l'attribut « muted » : 

<video controls autoplay muted src="resources/html-video-test_1.mp4"></video>

Il existe d'autres attributs, mais je vous ai présenté les plus essentiels.

La vidéo est hébergée ailleurs.

Héberger ses vidéos sur son propre site web, c'est bien, mais cela prend énormément de place, de poids chez votre hébergeur. Et si en plus, vous utilisez l'élément `<source>`, cela va être encore plus problématique. Souvent, il vaut mieux héberger ses vidéos sur des sites spécialisés. Je ne peux pas recenser dans cet article tous les sites d'hébergement de vidéos, mais je peux vous montrer comment intégrer une vidéo à partir du site  « Youtube ».

Vous cliquez sur le bouton « partager ».

 Puis sur intégrer :

Vous allez obtenir un « iframe ». Il vous suffira de le copier dans votre code.

Maintenant, vous en savez plus que beaucoup de personnes sur la façon d'implémenter des vidéos dans des articles.

Vous pouvez retrouver les exemples de codes sur mon GitLab.