it-swarm.com.de

So gehst du vor "Nicht erfasst (versprechend) DOMException: play () ist fehlgeschlagen, weil der Benutzer nicht zuerst mit dem Dokument interagierte." auf dem Desktop mit Chrome 66?

Ich erhalte die Fehlermeldung ..

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

Wenn Sie versuchen, ein Video mit der Chrome-Version 66 auf dem Desktop abzuspielen.

Ich habe eine Anzeige gefunden, die automatisch auf einer Website mit der Wiedergabe begann, jedoch mit folgendem HTML-Code:

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

Ist die Umgehung des Autoplay-Blockers von Chrome v66 wirklich so einfach wie das Hinzufügen der Attribute webkit-playsinline="true", playsinline="true" und autoplay="" zum Element <video>? Gibt es negative Folgen?

52
Steven

Damit die automatische Wiedergabe von HTML-5-Tags nach dem Chrome-66-Update funktioniert, müssen Sie lediglich die muted-Eigenschaft zum Video-Tag 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://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.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://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay="true"
    muted="muted"></video>

Ich glaube, dass das Chrome 66-Update versucht, Tabs zu stoppen, die zufälliges Rauschen auf den Benutzer-Tabs verursachen. Deshalb wird die automatische Wiedergabe durch die gedämpften Eigenschaften wieder aktiviert.

54
Joe
  1. chrome://flags/#autoplay-policy öffnen
  2. Einstellung Es ist keine Benutzergeste erforderlich
  3. Starten Sie Chrome neu
28
Ming

Die beste Lösung, die ich gefunden habe, ist das Video stummzuschalten

HTML

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

Beantwortung der Frage ...
Nein. Es reicht nicht aus, diese Attribute zu haben. 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 im übergeordneten 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 nicht irgendwo klicken, wird es nicht ausgeführt, da noch kein Ereignis registriert ist.
Wenn Sie jedoch auf die Schaltfläche "Ausführen" klicken, erhielt das übergeordnete Dokument (jsfiddle.net) eine Benutzergeste, und das Video wird abgespielt, obwohl es technisch in einem anderen Bereich geladen ist dokumentieren.

Das folgende Snippet wird jedoch automatisch gestartet, da Sie dazu tatsächlich auf die Schaltfläche Run code snippet 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 abgespielt werden konnte, weil Sie auf der Hauptseite eine Benutzergeste angegeben haben.


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

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, können Sie es einfach nicht an Ihre Medien anhängen. Ein Video mit nur einer Videospur kann auch automatisch abgespielt werden und reduziert die Bandbreitennutzung Ihres Benutzers.

7
Kaiido

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

Für mich (im Projekt Angular) half dieser Code:

In HTML solltest du autoplay muted hinzufügen

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

AKTUALISIEREN

Wenn diese Technik nicht mehr funktioniert, gibt es eine andere Option. Sie können ein kurzes und sehr leises (-60db) Audio einfügen und im Klick-Handler der ausgeblendeten Schaltfläche abspielen. Danach können alle anderen Audio-/Videodateien ohne direkte Benutzerinteraktion abgespielt werden. Sie können ein stilles Audiomaterial aus http://adventure.land/sounds/loops/empty_loop_for_js_performance.wav aufnehmen und es auf eine halbe Sekunde (oder weniger) reduzieren.


Es gibt eine sehr einfache Lösung - fügen Sie Ihrer Seite einfach einen BUTTON hinzu, formatieren Sie ihn als unsichtbar und rufen Sie dann die button.click()-Methode vor der play() auf.

Läuft wie ein Zauber in Chromium Version 70.0.3538.67 (Official Build) (64-Bit)

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 benötigt eine Benutzerinteraktion, damit das Video automatisch wiedergegeben oder über js (video.play ()) abgespielt werden kann. Aber die Interaktion kann in jedem Moment von beliebiger Art sein. Wenn Sie einfach auf der Seite auf "Zufällig" klicken, wird das Video automatisch wiedergegeben. Ich habe dann beschlossen, eine Schaltfläche hinzuzufügen (nur in Chrome-Browsern), die "Video-Autoplay aktivieren" sagt. Die Schaltfläche bewirkt nichts, sondern nur das Klicken. Dies ist die erforderliche Benutzerinteraktion für jedes weitere Video.

0
Alarik

Sie sollten das muted Attribut in Ihrem videoElement für Ihre Code-Arbeit wie erwartet 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

0
GNETO DOMINIQUE

Ich hatte Probleme mit dem Android Phone .. Nach einigen Versuchen habe ich herausgefunden, dass bei aktiviertem Data Saver keine automatische Wiedergabe möglich ist:

Es gibt keine Autoplay-Funktion, wenn Data Saver Modus aktiviert ist. Wenn der Datensparmodus aktiviert ist, ist die automatische Wiedergabe in den Medieneinstellungen deaktiviert.

Quelle

0
Ido

Beim Versuch, eine Audiodatei abzuspielen, ist ein ähnlicher Fehler aufgetreten. Zuerst funktionierte es, dann hörte es auf zu funktionieren, als ich begann, ChangeDetectors markForCheck -Methode in derselben Funktion zu verwenden, um ein erneutes Rendern auszulösen, wenn ein Versprechen aufgelöst wurde (ich hatte ein Problem mit dem Rendern von Ansichten).

Als ich die markForCheck in detectChanges änderte, fing es wieder an zu arbeiten. Ich kann wirklich nicht erklären, was passiert ist, ich dachte nur daran, dies hier abzulegen, vielleicht würde es jemandem helfen.

0

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 umbrechen, ihr Versprechen zu ergreifen und mich dann zu einer Wiedergabetaste herabzusetzen, wenn der Browser eine Ausnahme auslöst. Diese Erweiterung behebt den Mangel des Browsers und ist Plug-and-Play in jeder Seite mit Kenntnis des Zielelements (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>
0
Bernesto