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?

121

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?

Steven
quelle
2
Ich denke, PlaySinline ist eine iOS-Sache.
Josh Lee

Antworten:

124

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.

Joe
quelle
nachdem ich mir eine Stunde lang die Haare ausgezogen hatte. Dies hat mein Problem behoben
Andy McCormick
Gibt es eine Möglichkeit, Audio direkt nach dem Start des Videos zu aktivieren? Das Entfernen des muteAttributs oder des Einstellungsattributs volumehilft nicht.
Nikitahl
Auf MacOs Chrome Version 74.0.3729.131 geben beide Snippets schwarzen Bildschirm
Kamil Kiełczewski
@ KamilKiełczewski Das Video zeigte einen schwarzen Bildschirm, weil der srcungültig war. Ich habe das Snippet aktualisiert, srcdamit das Video automatisch abgespielt wird.
Joe
1
Ich musste es muted="true"stattdessen tun
tgordon18
13

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>
Moiz
quelle
12
  1. Öffnen chrome://settings/content/sound
  2. Einstellung Es ist keine Benutzergeste erforderlich
  3. Starten Sie Chrome neu
Ming
quelle
6
Änderungen der Autoplay-Richtlinie. Klicken Sie mich
Ming
4
Es wird nur für Entwickler verwendet, um das Verhalten von Chrome-Richtlinien für die automatische Wiedergabe lokal zu testen. developer.google.com/web/updates/2017/09/…
Tuan Nguyen
5
Ich fand, dass das Befehlszeilenflag --autoplay-policy=no-user-gesture-requiredder programmatische Weg ist, um diese Einstellung zu erreichen.
Nickiaconis
27
Dies funktioniert nur für Ihren Browser, alle anderen sind noch betroffen
koosa
37
Wer stimmt dieser Antwort zu? Dies ist nicht superuser.com. Eine Lösung für Ihren lokalen Computer kann keine akzeptable Antwort sein.
Adripanico
11

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 .

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.

Kaiido
quelle
11

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();
}
Eutrepe
quelle
1
Absolut wahr und unglaublich, selbst mit Ng8, der neuesten Angular-Version. Angular ist es einfach egal, was in der HTML-Vorlage der Komponente vor sich geht!
Pedro Ferreira
2
Und mit der neuen Verwendung von Angular @ViewChild()müssen Sie die sttatic-Option auf true setzen: @ViewChild('videoPlayer', {static: true}) videoplayer: ElementRef; video: HTMLVideoElement; Und dann: this.video = this.videoplayer.nativeElement;@ngOnInit()
Pedro Ferreira
1
Dies war mein Problem, in HTML stummgeschaltet wird völlig ignoriert und ich musste es von JS erzwingen. + 1M auf Ihre Antwort nach Tagen der Suche
Ignacio Bustos
Dies ist die richtige Antwort in meinem Fall, hat perfekt funktioniert
Harry .Naeem
Wow, ich kann nicht glauben, dass ich tatsächlich die Javascript-seitige Stummschaltung für Angular SSR-Post-Load-Ansichten benötigt habe. Die ganze Zeit dachte ich, der HTML-Code sei das Problem.
arao6
7

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

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>
Bernesto
quelle
Dies ist ein sehr cleverer Ansatz, der keine Richtlinien verletzt (da die Wiedergabe sowieso nicht startet) und Fehler verhindert. +1
loretoparisi
3

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();
Shobi
quelle
2

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.

Alarik
quelle
1

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.

König James Enejo
quelle
1

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

GNETO DOMINIQUE
quelle
0

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

Ich mache
quelle
-6

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

DARKSETH23
quelle
24
Sie können unmöglich jeden Benutzer bitten, die Einstellungen zu ändern.
Ashish Jhanwar
2
Dies könnte das Problem für einige Leute tatsächlich lösen (Kioske, private und lokale Websites ...), aber die Flagge wurde in Chrome 76 entfernt. Jetzt ist die einzige Lösung diese Antwort
Milan Švehla