Comment gérer "DOMException Uncaught (promis): play () a échoué car l'utilisateur n'a pas interagi avec le document en premier." sur le bureau avec Chrome 66?

Question

Je reçois le message d'erreur..

Non interceptée (promettre) DOMException: jouer() a échoué car l'utilisateur n'a pas à interagir avec le document.

..lorsque vous essayez de lire une vidéo sur un ordinateur de bureau à l'aide de la version Chrome 66.

J'ai trouvé une annonce qui a commencé la lecture automatiquement sur un site web, cependant en utilisant le code HTML suivant:

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay=""></video>

Par de passage de Chrome v66 de lecture automatique bloqueur vraiment aussi facile que d'ajouter de l' webkit-playsinline="true", playsinline="true", et autoplay="" attributs de l' <video> élément? Existe-il des conséquences négatives pour cela?

Answer 1

Pour rendre la lecture automatique sur html 5 éléments de travail après le chrome 66 mise à jour, vous avez juste besoin d'ajouter de l' muted de la propriété de l'élément vidéo.

De sorte que votre vidéo en cours HTML

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay=""></video>

Juste besoin d' muted="muted"

<video
    title="Advertisement"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay="true"
    muted="muted"></video>

Je crois que le chrome 66 mise à jour est d'essayer de cesser de les onglets de la création d'un bruit aléatoire sur les utilisateurs des onglets. C'est pourquoi la modération de la propriété de rendre la lecture automatique de travailler à nouveau.

Answer 2

Essayez d'utiliser mousemove event lisentner

 var audio = document.createElement("AUDIO")
document.body.appendChild(audio);
audio.src = "./audio/rain.m4a"

document.body.addEventListener("mousemove", function () {
    audio.play()
})
 

Answer 3

La meilleure solution que j'ai trouvée est de couper le son de la vidéo

HTML

 <video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>
 

Answer 4

Répondre à la question à portée de main...
Non, il ne suffit pas d'avoir ces attributs, pour être en mesure de autoplay media audio, vous devez disposer d'un utilisateur geste enregistré sur votre document.

Mais, cette limitation est très faible: si vous avez reçu ce geste sur le document parent, et votre vidéo obtenu chargé à partir d'une iframe, alors vous pouvez jouer...

Prenez par exemple ce violon, qui est seulement

<video src="myvidwithsound.webm" autoplay=""></video>

Lors du premier chargement, et si vous ne cliquez pas n'importe où, il ne fonctionnera pas, parce que nous n'avons pas d'événement encore inscrit.
Mais une fois que vous cliquez sur le "Run" bouton, puis le document parent (jsfiddle.net) a reçu un utilisateur geste, et maintenant, la vidéo joue, même si c'est techniquement chargé dans un autre document.

Mais le fragment de code suivant, car il vous oblige à cliquer sur l' Exécution d'un extrait de code bouton de lecture automatique.

<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" autoplay=""></video>

Cela signifie que votre annonce a probablement été en mesure de jouer parce que vous n'avez fournir à un utilisateur geste à la page principale.

---

Maintenant, notez que Safari Mobile et Chrome ont des règles plus strictes que cela, et vous obligera à déclencher au moins une fois l' play() méthode par programmation sur l' <video> ou <audio> élément de l'utilisateur gestionnaire d'événement de lui-même.

btn.onclick = e => {
  // mark our MediaElement as user-approved
  vid.play().then(()=>vid.pause());
  // now we can do whatever we want at any time with this MediaElement
  setTimeout(()=> vid.play(), 3000);
};

<button id="btn">play in 3s</button>
<video
  src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" id="vid"></video>

Et si vous n'avez pas besoin de l'audio, puis il suffit de ne pas attacher à vos médias, une vidéo avec seulement une piste vidéo est également autorisé à lecture automatique, et permettra de réduire votre utilisation de la bande passante.

Answer 5

1. Ouvert chrome://flags/#autoplay-policy
2. Réglage Aucun geste de l'utilisateur n'est requis
3. Relancer Chrome