Je me suis confronté à un problème récemment au boulot, où le client voulait avoir sur son site une vidéo en full-screnn, en autoplay, avec le son et en boucle. Une vidéo en fullscreen sur le web, ça le fait, et c’est vrai que c’est assez courant de le rencontrer. Seulement voilà, …
Compatibilité navigateurs
Les navigateurs se sont tous mis d’accord qu’il n’était pas possible de démarrer une vidéo avec le son sans en demander l’autorisation à l’utilisateur. Et ils n’ont pas tort. Il n’y a rien de plus énervant que d’entendre le son d’une vidéo au chargement d’une page. Seulement le client est roi et je me suis donc penché sur le problème en visitant les différentes librairies javascript, pensant que ça allait m’aider. J’en ai essayé pas mal :
Librairie disponible
- Bidéo
- Vide
- Tubular
- plyr
- YTPlayer
Au final, elles fonctionnent toutes un peu pareilles et créent une balise vidéo au sein de votre html. Bidéo est très intéressante puisque le développeur à l’origine du projet calcule le ratio de la vidéo en fonction de la taille de votre fenêtre de navigateur. On obtient alors une vidéo responsive ce qui est plus qu’important en 2019 …
Des bibliothèques comme Vide et PLYR sont assez similaires. Ce qui est très chouette avec ce type de librairies javascript, c’est que vous pouvez vous-même styliser votre player en changeant par exemple le bouton play ou pause, et inciter ainsi votre internaute à arrêter ou redémarrer votre film.
Les librairies comme Tubular (attention, un peu dépassée) ou YTPlayer sont liées aux plateformes connues du web : Viméo et Youtube. Ici ce qui est intéressant, c’est que vous évitez les conflits avec les différents lecteurs vidéo. En effet, pour qu’une vidéo soit lue sur le web et ses différents navigateurs, vous devez la convertir en 3 formats :
Différents formats
- webm
- MP4 (h264 pour les iphones …)
- OGV
À ce propos, je vous conseille la lecture du tuto d’alsacréations sur la balise video en html. Il m’a beaucoup aidé.
Pour terminer avec Youtube …
Et la suite ? Au final, je n’y suis pas arrivé. Lorsque je forçais l’autoplay, la vidéo était muette. Et quand elle n’était pas muette, l’autoplay ne fonctionnait pas. Et ne parlons pas de la compatibilité des différents smartphones. Iphone par exemple ajoute un format à la liste précitée des formats vidéos : l’h4v. Mais là aussi, les résultats étaient aléatoires.
Voilà pourquoi j’ai opté dans mon exemple ci-dessous pour une librairie liée à Youtube pour mettre une vidéo en background.
Le client est roi ?
Au final, et c’est heureux, le client a apprécié la vidéo avec un bouton Play au démarrage de son site. La solution aurait peut-être pu se trouver dans ce cas de figure : après x secondes sur le site, la vidéo s’enclenche. Mais cela revenait à agacer le visiteur et pour résumer, l’utilisation de ces librairies est à faire avec parcimonie.
Ci-dessous, dans mon exemple, j’ai stylisé un bouton Play enclenchant une méthode (ligne19) qui arrête la vidéo. Une fois sur pause, ce bouton peut enclencher son redémarrage. J’ai également choisi YTPlayer car il dispose des filtres graphiques assez intéressants (ex. ligne 12).
