Lire automatiquement des contenus audio et vidéo sur le Web est une fonctionnalité puissante, qui est soumise à différentes restrictions selon les plates-formes.
Aujourd'hui, la plupart des navigateurs pour ordinateur permettent toujours aux pages Web de lancer la lecture <video> ou <audio> via JavaScript sans intervention de l'utilisateur.
Cependant, la plupart des navigateurs mobiles nécessitent un geste explicite de l'utilisateur pour que la lecture déclenchée par JavaScript puisse avoir lieu. Cela permet de garantir que les utilisateurs mobiles, dont la plupart paient pour la bande passante ou qui se trouvent 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 de l'utilisateur est requise pour démarrer la lecture, et de détecter les échecs qui se produisent lorsqu'une tentative de lecture (automatique) échoue. Il existe plusieurs solutions de contournement, mais elles ne sont pas optimales. Une amélioration de la méthode play() sous-jacente pour faire face à cette incertitude est attendue depuis longtemps. Elle est désormais disponible sur 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 réussit, la promesse est satisfaite. Si la lecture échoue, elle est rejetée, avec un message d'erreur expliquant l'échec. Cela vous permet d'écrire un code intuitif comme celui-ci:
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 Promise 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émarrage de la lecture. Par exemple, Chrome pour ordinateur ne lance la lecture d'une <video> que lorsque l'onglet est visible. La promesse ne se termine qu'une fois la lecture commencée, ce qui signifie que le code à l'intérieur de then() ne s'exécute que lorsque le contenu multimédia est en cours de lecture. Les méthodes précédentes permettant de déterminer si play() aboutit, telles que l'attente d'un délai défini pour un événement playing et la supposition d'un échec s'il ne se déclenche pas, sont susceptibles de générer de faux négatifs dans les scénarios de lecture différée.
Nous avons publié un exemple en direct de cette nouvelle fonctionnalité. Affichez-le dans un navigateur compatible avec cette interface basée sur Promise, par exemple Chrome 50. Attention: la musique sera automatiquement lue sur la page lorsque vous la consulterez. (à moins, bien sûr, ce n'est pas le cas !)
Zone dangereuse
<source> dans <video> permet de ne jamais rejeter la promesse de play()
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 rejetée. Cela ne se produit que s'il n'y a pas de sources valides.