Lancer des vidéos HTML5 automatiquement sur mobile

Depuis l'arrivée du HTML5, ajouter une vidéo dans sur un site ou une application web est devenu simple comme bonjour, il suffit d'ajouter une balise <video> accompagnée d'une ou plusieurs balises <source>.

À noter qu'il reste nécessaire de mettre à disposition plusieurs formats de fichiers vidéos pour une compatibilité optimale

Pour lancer une vidéo automatiquement au chargement de la page (ou lors de l'apparition d'un nouveau bloc), il existe un attribut logiquement appelé "autoplay", qu'il suffit d'ajouter dans l'élément <video>.

Néanmoins, lorsque le site est consulté depuis un mobile, il y a de fortes chances que le contenu ne se lance pas automatiquement. Je vais vous expliquer pourquoi et comment résoudre ce problème.

L'autoplay sur mobile

Il y a deux principales raisons pour lesquels l'autoplay des vidéos sur les appareils mobiles est limité :

• Afin de limiter la consommation de data sur les forfaits des utilisateurs sans que ces derniers ne s'en rende compte
• Améliorer l'expérience utilisateur et éviter que des sons ne se déclenchent à tout bout de champ lors de la navigation (déjà dérangeant sur PC, mais encore d'avantage dans un lieu public)

C'est pour ces raisons que sur iOS et Android, le lancement automatique des vidéos est limité à un cas très précis, et demande des attributs supplémentaires pour fonctionner.

L'attribut muted

Une vidéo en autoplay devra absolument avoir le son coupé grâce à l'attribut muted pour être jouée en automatique après son chargement.

Même si la bande passante n'est pas affectée (la vidéo est chargée avec le son, ce dernier est juste coupé), cela permet de réduire les nuisances sonores, et théoriquement de limiter l'utilisation de l'autoplay à des vidéos d'illustrations ou d'arrière plan, souvent assez courtes et jouées en boucle, donc économes en terme de poids.

À noter que si la vidéo ne contient pas de son à l'origine (aucune piste sonore), alors l'attribut muted peut être omis

L'attribut playsinline

Cet attribut est majoritairement requis sur iOS, car par défaut le système ouvre les vidéos dans un lecteur vidéo propriétaire, mais incompatible avec l'autoplay.

Il faut donc dire explicitement au système que cette vidéo doit-être lue à l'intérieur du navigateur, au sein de la page dans laquelle elle est intégrée.

Démonstration

Voilà un exemple de code minimal pour intégrer une vidéo en autoplay qui fonctionne sur mobile !

Dans l'exemple ci-dessous, l'attribut loop est facultatif, mais souvent utilisé pour les vidéos d'illustration.

<video autoplay muted playsinline loop>
  <source type="video/webm" src="..."/>
  <source type="video/mp4" src="..."/>
</video>

Si vous visionnez l'article sur votre smartphone, vous pourrez voir que la vidéo se lance automatiquement, que vous soyez sur Android ou iOS.

Lancer la vidéo en différé

Comment faire pour que la vidéo se lance automatiquement mais après un certains délai, en utilisant la méthode .play() de l'API vidéo en Javascript sur mobile ?

Les limitations pour lancer la vidéo de manière programmatique sont les mêmes que précédemment, ce qui signifie que si votre vidéo est mutée, vous aurez la possibilité d'appeler la méthode .play() n'importe quand.

En revanche si vous voulez que la vidéo se lance avec le son, il faudra absolument que l'appel à cette fonction se fasse après une intéraction utilisateur (un clic), dans le cas d'un jeu en HTML5 dans lequel plusieurs vidéos se lancent, il faudra donc adapter le parcours utilisateur pour lui faire effectuer un clic juste avant de lancer une vidéo avec le son.