web-dev-qa-db-fra.com

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

Je reçois le message d'erreur ..

Non pris (promis) DOMException: play () a échoué car l'utilisateur n'a pas interagi avec le document auparavant.

..quand essayer de lire une vidéo sur le bureau en utilisant Chrome version 66.

J'ai trouvé une annonce dont la lecture a commencé automatiquement sur un site Web, mais 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 conséquent, contourner le bloqueur de lecture automatique de Chrome v66 est-il vraiment aussi simple que d'ajouter les attributs webkit-playsinline="true", playsinline="true" et autoplay="" à l'élément <video>? Y at-il des conséquences négatives à cela?

javascriptgoogle-chromevideohtml5-video
52
Steven

Pour que l'auto-lecture sur les balises html 5 fonctionne après la mise à jour de Chrome 66, il vous suffit d'ajouter la propriété muted à la balise video.

Donc, votre vidéo HTML actuelle 

<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>

Juste besoin de muted="muted"

<video
    title="Advertisement"
    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="true"
    muted="muted"></video>

Je crois que la mise à jour de chrome 66 tente d’empêcher les onglets de créer un bruit aléatoire sur les onglets des utilisateurs. C'est pourquoi la propriété muette fait à nouveau fonctionner la lecture automatique.

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

La meilleure solution que j'ai trouvée est de mettre la vidéo en sourdine

HTML

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

Répondre à la question posée ...
Non, il ne suffit pas d'avoir ces attributs, pour pouvoir lire automatiquement un média avec de l'audio, il est nécessaire de faire enregistrer un geste de l'utilisateur sur votre document.

Mais cette limitation est très faible: si vous avez reçu ce geste de l'utilisateur sur le document parent et que votre vidéo a été chargée à partir d'un iframe, vous pouvez alors la lire ...

Alors prenons par exemple ce violon , qui est seulement

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

Au premier chargement, et si vous ne cliquez nulle part, il ne fonctionnera pas, car aucun événement n'a encore été enregistré.
Mais une fois que vous avez cliqué sur le bouton "Exécuter", le document parent (jsfiddle.net) a reçu un geste de l'utilisateur. La vidéo est alors lue, même s'il est techniquement chargé dans un autre document.

Mais l'extrait de code suivant, puisqu'il vous oblige à cliquer sur le bouton Exécuter l'extrait de code, sera automatiquement lu.

<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 pu être lue, car vous avez fourni un geste de l'utilisateur à la page principale.

Notez maintenant que Safari et Mobile Chrome ont des règles plus strictes que cela et vous obligeront à déclencher au moins une fois la méthode play() par programme sur l'élément <video> ou <audio> à partir du gestionnaire d'événements utilisateur 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, ne la connectez pas simplement à votre média. Une vidéo contenant uniquement une piste vidéo est également autorisée à lire automatiquement, ce qui réduira l'utilisation de la bande passante par l'utilisateur.

7
Kaiido

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()
})
3
時雨初

Pour moi (dans le projet Angular), ce code a aidé:

En HTML, vous devriez ajouter autoplay muted

En JS/TS

playVideo() {
    const media = this.videoplayer.nativeElement;
    media.muted = true; // without this line it's not working although I have "muted" in HTML
    media.play();
}
3
Eutrepe

METTRE À JOUR

Si cette technique ne fonctionne plus, il existe une autre option. Vous pouvez inclure un son court et très silencieux (-60db) et le lire dans le gestionnaire de clic du bouton caché. Après cela, tous les autres fichiers audio/vidéo seront autorisés à jouer sans interaction directe de l'utilisateur. Vous pouvez prendre un son silencieux depuis http://adventure.land/sounds/loops/empty_loop_for_js_performance.wav et le couper en une demi-seconde (ou moins).

Il existe une solution très simple: ajoutez simplement un BOUTON à votre page, donnez-lui un style invisible, puis appelez la méthode button.click() avant la play().

Fonctionne comme un charme dans la version 70.0.3538.67 de Chromium (version officielle) (64 bits) 

var btn = document.getElementById('btn');
document.addEventListener(btn,myPlay,false);
btn.click();

function myPlay()
{
  document.getElementById('movie').play();
}
<video
    title="Advertisement" id="movie"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm"
    ></video>
    <button type="button" style="z-index:-1;opacity:0;position: absolute;left:-1000px;" id="btn"></button>

2
IVO GELOV

Chrome a besoin d'une interaction de l'utilisateur pour que la vidéo soit lue automatiquement ou lue via js (video.play ()). Mais l'interaction peut être de n'importe quel type, à n'importe quel moment. Si vous cliquez simplement au hasard sur la page, la vidéo sera lue automatiquement. J'ai résolu alors, en ajoutant un bouton (uniquement sur les navigateurs Chrome) qui dit "activer la lecture automatique de la vidéo". Le bouton ne fait rien, mais le simple fait de cliquer dessus constitue l'interaction utilisateur requise pour toute vidéo ultérieure.

0
Alarik

Vous devriez avoir ajouté l'attribut muted à l'intérieur de votre videoElement pour que votre code fonctionne comme prévu. Regardez ci-dessous ..

<video id="IPcamerastream" muted="muted" autoplay src="videoplayback%20(1).mp4" width="960" height="540"></video>

N'oubliez pas d'ajouter un lien vidéo valide en tant que source

0
GNETO DOMINIQUE

J'ai eu quelques problèmes en jouant sur Android Phone . Après quelques essais, j'ai découvert que lorsque Data Saver est activé, la lecture automatique n'est pas possible:

Il n'y a pas d'exécution automatique si Data Saver mode est activé. Si le mode économiseur de données est activé, la lecture automatique est désactivée dans les paramètres de support.

La source

0
Ido

J'ai rencontré une erreur similaire lors de la tentative de lecture d'un fichier audio. Au début, cela fonctionnait, puis il a cessé de fonctionner lorsque j'ai commencé à utiliser la méthode markForCheck de ChangeDetector dans la même fonction pour déclencher un nouveau rendu lorsqu'une promesse est résolue (un problème de rendu de vue s'est produit.).

Quand j'ai changé la markForCheck en detectChanges, cela a recommencé à fonctionner. Je ne peux vraiment pas expliquer ce qui s'est passé, j'ai juste pensé laisser tomber ceci ici, peut-être que cela aiderait quelqu'un.

0
King James Enejo

étendre l’élément DOM, gérer l’erreur et dégrader en douceur

Ci-dessous, j'utilise la fonction prototype pour envelopper la fonction de lecture dans le DOM native, saisir sa promesse, puis passer à un bouton de lecture si le navigateur lève une exception. Cette extension corrige les failles du navigateur et est plug-n-play dans toute page connaissant le ou les éléments cibles.

// JavaScript
// Wrap the native DOM audio element play function and handle any autoplay errors
Audio.prototype.play = (function(play) {
return function () {
  var audio = this,
      args = arguments,
      promise = play.apply(audio, args);
  if (promise !== undefined) {
    promise.catch(_ => {
      // Autoplay was prevented. This is optional, but add a button to start playing.
      var el = document.createElement("button");
      el.innerHTML = "Play";
      el.addEventListener("click", function(){play.apply(audio, args);});
      this.parentNode.insertBefore(el, this.nextSibling)
    });
  }
};
})(Audio.prototype.play);

// Try automatically playing our audio via script. This would normally trigger and error.
document.getElementById('MyAudioElement').play()

<!-- HTML -->
<audio id="MyAudioElement" autoplay>
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
0
Bernesto