Vorgehensweise "Nicht gefangen (im Versprechen) DOMException: play () ist fehlgeschlagen, weil der Benutzer nicht zuerst mit dem Dokument interagiert hat." auf dem Desktop mit Chrome 66?

Ich erhalte die Fehlermeldung ..

Nicht erfasst (im Versprechen) DOMException: play () ist fehlgeschlagen, weil der Benutzer nicht zuerst mit dem Dokument interagiert hat.

..wenn Sie versuchen, Videos mit Chrome Version 66 auf dem Desktop abzuspielen.

Ich habe eine Anzeige gefunden, die automatisch auf einer Website abgespielt wurde, jedoch den folgenden HTML-Code verwendet:

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

So ist unter Umgehung Autoplay - Blocker Chrome v66 wirklich so einfach wie nur das Hinzufügen der webkit-playsinline="true", playsinline="true"und autoplay=""Attribute an das <video>Element? Gibt es irgendwelche negativen Konsequenzen dafür?

Damit die automatische Wiedergabe von HTML 5-Elementen nach dem Chrome 66-Update funktioniert, müssen Sie nur die mutedEigenschaft zum Videoelement hinzufügen .

Also dein aktuelles Video 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>

Benötigt nur 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>

Ich glaube, das Chrome 66-Update versucht, Tabs zu stoppen, die zufälliges Rauschen auf den Tabs des Benutzers verursachen. Aus diesem Grund funktioniert die automatische Wiedergabe aufgrund der stummgeschalteten Eigenschaft wieder.

Die beste Lösung, die ich herausgefunden habe, ist das Stummschalten des Videos

HTML

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

1. Öffnen chrome://settings/content/sound
2. Einstellung Es ist keine Benutzergeste erforderlich
3. Starten Sie Chrome neu

Beantwortung der vorliegenden Frage ...
Nein, es reicht nicht aus, über diese Attribute zu verfügen. Um ein Medium mit Audio automatisch abspielen zu können, muss eine Benutzergeste in Ihrem Dokument registriert sein.

Diese Einschränkung ist jedoch sehr schwach: Wenn Sie diese Benutzergeste für das übergeordnete Dokument erhalten haben und Ihr Video von einem Iframe geladen wurde, können Sie es abspielen ...

Nehmen wir zum Beispiel diese Geige , die nur ist

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

Beim ersten Laden und wenn Sie nirgendwo klicken, wird es nicht ausgeführt, da noch kein Ereignis registriert ist.
Sobald Sie jedoch auf die Schaltfläche "Ausführen" klicken , hat das übergeordnete Dokument (jsfiddle.net) eine Benutzergeste erhalten, und jetzt wird das Video abgespielt, obwohl es technisch in ein anderes Dokument geladen ist.

Das folgende Snippet wird jedoch automatisch wiedergegeben, da Sie tatsächlich auf die Schaltfläche Code-Snippet ausführen klicken müssen .

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

Dies bedeutet, dass Ihre Anzeige wahrscheinlich geschaltet werden konnte, weil Sie der Hauptseite eine Nutzergeste gegeben haben.

Beachten Sie nun, dass Safari und Mobile Chrome strengere Regeln haben und dass Sie die play()Methode mindestens einmal programmgesteuert für das Element <video>oder <audio>vom Benutzerereignishandler selbst auslösen müssen .

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>

Wenn Sie das Audio nicht benötigen, hängen Sie es einfach nicht an Ihr Medium an. Ein Video mit nur einer Videospur kann ebenfalls automatisch wiedergegeben werden und verringert die Bandbreitennutzung Ihres Benutzers.

Für mich (im Angular-Projekt) hat dieser Code geholfen:

In HTML sollten Sie hinzufügen autoplay muted

In 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();
}

Versuchen Sie, mousemove event lisentner zu verwenden

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

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

Erweitern Sie das DOM-Element, behandeln Sie den Fehler und verschlechtern Sie es ordnungsgemäß

Im Folgenden verwende ich die Prototypfunktion, um die native DOM-Wiedergabefunktion zu verpacken, ihr Versprechen zu erfüllen und mich dann zu einer Wiedergabetaste zu verschlechtern, wenn der Browser eine Ausnahme auslöst. Diese Erweiterung behebt das Manko des Browsers und ist Plug-n-Play auf jeder Seite mit Kenntnis der Zielelemente.

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

In meinem Fall musste ich das tun

 // Initialization in the dom
 // Consider the muted attribute
 <audio id="notification" src="path/to/sound.mp3" muted></audio>


 // in the js code unmute the audio once the event happened
 document.getElementById('notification').muted = false;
 document.getElementById('notification').play();

Chrome benötigt eine Benutzerinteraktion, damit das Video automatisch abgespielt oder über js (video.play ()) abgespielt werden kann. Aber die Interaktion kann zu jedem Zeitpunkt von jeder Art sein. Wenn Sie auf der Seite nur zufällig klicken, wird das Video automatisch wiedergegeben. Ich habe mich dann entschlossen, eine Schaltfläche (nur bei Chrome-Browsern) hinzuzufügen, auf der "Video-Autoplay aktivieren" steht. Die Schaltfläche bewirkt nichts, aber nur darauf zu klicken, ist die erforderliche Benutzerinteraktion für jedes weitere Video.

Beim Versuch, eine Audiodatei abzuspielen, ist ein ähnlicher Fehler aufgetreten. Zuerst funktionierte es, dann funktionierte es nicht mehr, als ich die markForCheckMethode von ChangeDetector in derselben Funktion verwendete, um ein erneutes Rendern auszulösen, wenn ein Versprechen aufgelöst wurde (ich hatte ein Problem mit dem Rendern von Ansichten).

Als ich das änderte markForCheck, detectChangesfing es wieder an zu arbeiten. Ich kann wirklich nicht erklären, was passiert ist, ich habe nur daran gedacht, das hier fallen zu lassen, vielleicht würde es jemandem helfen.

Sie sollten wie erwartet ein mutedAttribut videoElementfür Ihre Code-Arbeit in Ihrem hinzugefügt haben . Schau unten ..

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

Vergessen Sie nicht, einen gültigen Videolink als Quelle hinzuzufügen

Ich hatte einige Probleme beim Spielen auf Android Phone. Nach einigen Versuchen stellte ich fest, dass bei aktiviertem Data Saver keine automatische Wiedergabe erfolgt:

Es gibt keine automatische Wiedergabe, wenn der Datensparmodus aktiviert ist. Wenn der Datensparmodus aktiviert ist, ist die automatische Wiedergabe in den Medieneinstellungen deaktiviert.

Quelle

Geben Sie Chrome: // flags in die Adressleiste ein

Suche: Autoplay

Autoplay-Richtlinie

Richtlinie, die verwendet wird, wenn entschieden wird, ob Audio oder Video automatisch wiedergegeben werden dürfen.

- Mac, Windows, Linux, Chrome OS, Android

Stellen Sie dies auf " Keine Benutzergeste erforderlich ".

Starten Sie Chrome neu und Sie müssen keinen Code ändern