La lecture automatique d'audio et de vidéo sur le Web est une fonctionnalité puissante, soumise à différentes restrictions sur différentes plates-formes.
Aujourd'hui, la plupart des navigateurs pour ordinateur permettent toujours aux pages Web de commencer la lecture de <video> ou de <audio> via JavaScript sans interaction de l'utilisateur.
Toutefois, la plupart des navigateurs mobiles nécessitent un geste utilisateur explicite avant que la lecture déclenchée par JavaScript puisse avoir lieu. Cela permet de s'assurer que les utilisateurs mobiles, dont beaucoup paient pour la bande passante ou qui peuvent se trouver dans un environnement public, ne commencent pas accidentellement à télécharger et à lire des contenus multimédias sans interagir explicitement avec la page.
Il a toujours été difficile de déterminer si une interaction utilisateur est requise pour lancer la lecture et de détecter les échecs qui se produisent lorsque la lecture (automatique) est tentée et échoue. Il existe plusieurs solutions, mais elles ne sont pas idéales. Une amélioration de la méthode play() sous-jacente pour résoudre cette incertitude est attendue depuis longtemps. Elle a maintenant atteint la plate-forme Web, avec une implémentation initiale dans Chrome 50.
Un appel play() sur un élément <video> ou <audio> renvoie désormais une promesse. Si la lecture aboutit, la promesse est remplie, et si la lecture échoue, la promesse est rejetée avec un message d'erreur expliquant l'échec. Vous pouvez ainsi écrire du code intuitif comme suit:
var playPromise = document.querySelector('video').play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
En plus de détecter si la méthode play() a réussi, la nouvelle interface basée sur les promesses vous permet de déterminer quand la méthode play() a réussi. Dans certains contextes, un navigateur Web peut décider de retarder le début de la lecture. Par exemple, Chrome pour ordinateur ne commencera pas la lecture d'un <video> tant que l'onglet n'est pas visible. La promesse ne sera pas remplie tant que la lecture n'a pas commencé, ce qui signifie que le code dans then() ne s'exécutera pas tant que le contenu multimédia n'est pas en cours de lecture. Les méthodes précédentes permettant de déterminer si play() est réussie, telles que l'attente d'un délai défini pour un événement playing et l'hypothèse d'échec en cas de non-déclenchement, sont sujettes à des faux négatifs dans les scénarios de lecture différée.
Nous avons publié un exemple concret de cette nouvelle fonctionnalité. Affichez-le dans un navigateur tel que Chrome 50, qui est compatible avec cette interface basée sur des promesses. Attention: la page diffuse automatiquement de la musique lorsque vous la consultez. (À moins que cela ne soit pas le cas, bien sûr !)
Zone dangereuse
<source> dans <video> fait en sorte que la promesse play() n'est jamais refusée
Pour <video src="not-existing-video.mp4"\>, la promesse play() est rejetée comme prévu, car la vidéo n'existe pas. Pour <video><source src="not-existing-video.mp4" type='video/mp4'></video>, la promesse play() n'est jamais refusée. Cela ne se produit que si aucune source valide n'est disponible.