Jak poradzić sobie z „Nieprzechwycony (obiecany) DOMException: play () nie powiodło się, ponieważ użytkownik nie wszedł w interakcję z dokumentem”. na komputerze z Chrome 66?

122

Otrzymuję komunikat o błędzie ...

Nieprzechwycony (obiecany) DOMException: play () nie powiodło się, ponieważ użytkownik nie wszedł w interakcję z dokumentem.

..podczas próby odtwarzania wideo na komputerze przy użyciu przeglądarki Chrome w wersji 66.

Znalazłem reklamę, która zaczęła się automatycznie odtwarzać w witrynie internetowej, jednak przy użyciu następującego kodu 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>

Tak jest z pominięciem Chrome V66 za autoplay bloker naprawdę tak proste, jak po prostu dodając webkit-playsinline="true", playsinline="true"oraz autoplay=""atrybuty do <video>elementu? Czy są jakieś negatywne konsekwencje?

Steven
źródło
2
Myślę, że playinline to kwestia iOS.
Josh Lee

Odpowiedzi:

125

Aby autoodtwarzanie elementów html 5 działało po aktualizacji chrome 66, wystarczy dodać mutedwłaściwość do elementu wideo.

Więc twój obecny kod HTML wideo

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

Po prostu potrzebuje 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>

Wydaje mi się, że aktualizacja Chrome 66 próbuje zatrzymać karty, które generują losowy szum na kartach użytkowników. Dlatego właściwość wyciszona powoduje, że autoodtwarzanie znów działa.

Joe
źródło
po godzinie wyrywania włosów. to rozwiązało mój problem
Andy McCormick
Czy istnieje sposób na włączenie dźwięku zaraz po rozpoczęciu odtwarzania wideo? Usunięcie muteatrybutu lub ustawienie volumeatrybutu nie pomaga.
nikitahl
Na MacOs Chrome Version 74.0.3729.131 oba fragmenty wyświetlają czarny ekran
Kamil Kiełczewski
@ KamilKiełczewski Film wyświetlał czarny ekran, ponieważ srcbył nieprawidłowy. Zaktualizowałem fragment, srcwięc wideo jest odtwarzane automatycznie.
Joe
2
muted="true"Zamiast tego musiałem zrobić
tgordon18
13

Najlepszym rozwiązaniem, jakie znalazłem, jest wyciszenie wideo

HTML

<video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>
Moiz
źródło
12
  1. otwarty chrome://settings/content/sound
  2. Ustawienie Nie jest wymagany żaden gest użytkownika
  3. Uruchom ponownie Chrome
Ming
źródło
6
Zmiany zasad automatycznej gry. Kliknij mnie
Ming
4
Jest używany tylko przez programistę do lokalnego testowania zachowania zasad autoodtwarzania Chrome. developers.google.com/web/updates/2017/09/…
Tuan Nguyen
5
Odkryłem, że flaga wiersza poleceń --autoplay-policy=no-user-gesture-requiredjest programowym sposobem osiągnięcia tego ustawienia.
nickiaconis
27
Działa to tylko dla Twojej przeglądarki, wszyscy inni będą nadal dotknięci
koosa
40
Kto popiera tę odpowiedź? To nie jest superuser.com. Rozwiązanie dla twojego lokalnego komputera nie może być akceptowalną odpowiedzią.
adripanico
11

Odpowiadając na to pytanie…
Nie, nie wystarczy mieć te atrybuty, aby móc automatycznie odtwarzać multimedia z dźwiękiem, musisz mieć zarejestrowany gest użytkownika w swoim dokumencie.

Ale to ograniczenie jest bardzo słabe: jeśli otrzymałeś ten gest użytkownika w dokumencie nadrzędnym, a Twój film został załadowany z elementu iframe, możesz go odtworzyć ...

Weźmy więc na przykład te skrzypce , które są tylko

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

Przy pierwszym załadowaniu i jeśli nigdzie nie klikniesz, nie uruchomi się, ponieważ nie mamy jeszcze zarejestrowanego żadnego wydarzenia.
Ale po kliknięciu przycisku „Uruchom” dokument nadrzędny (jsfiddle.net) otrzymał gest użytkownika, a teraz wideo jest odtwarzane, mimo że technicznie jest załadowane w innym dokumencie.

Ale poniższy fragment, ponieważ wymaga rzeczywistego kliknięcia przycisku Uruchom fragment kodu , zostanie automatycznie odtworzony.

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

Oznacza to, że prawdopodobnie Twoja reklama mogła zostać odtworzona, ponieważ wykonałeś gest użytkownika na stronie głównej.


Teraz zwróć uwagę, że Safari i Mobile Chrome mają bardziej rygorystyczne reguły i będą wymagać, abyś faktycznie uruchomił play()metodę co najmniej raz programowo na elemencie <video>lub <audio>z samego programu obsługi zdarzeń użytkownika.

A jeśli nie potrzebujesz dźwięku, po prostu nie dołączaj go do multimediów, wideo zawierające tylko ścieżkę wideo może być również odtwarzane automatycznie i zmniejszy wykorzystanie przepustowości przez użytkownika.

Kaiido
źródło
11

Dla mnie (w projekcie Angular) ten kod pomógł:

W HTML należy dodać autoplay muted

W 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
źródło
1
Absolutnie prawdziwe i niewiarygodne, nawet z Ng8, najnowszą wersją Angular. Angular po prostu nie dba o to, co się dzieje w szablonie HTML komponentu!
Pedro Ferreira
2
A ze sposobem używania nowego @ViewChild()Angulara musisz ustawić opcję statyczną na true: @ViewChild('videoPlayer', {static: true}) videoplayer: ElementRef; video: HTMLVideoElement; A potem: this.video = this.videoplayer.nativeElement;@ngOnInit()
Pedro Ferreira
1
To był mój problem, wyciszenie w HTML jest całkowicie ignorowane i musiałem to wymusić przez JS. + 1 mln do Twojej odpowiedzi po dniach wyszukiwania
Ignacio Bustos
To jest właściwa odpowiedź w moim przypadku, działała idealnie
Harry .Naeem
Wow, nie mogę uwierzyć, że faktycznie potrzebowałem wyciszania po stronie JavaScript dla widoków Angular SSR po załadowaniu. Przez cały czas myślałem, że problem stanowi HTML.
arao6
7

Spróbuj użyć lisentnera zdarzeń mousemove

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

document.body.addEventListener("mousemove", function () {
    audio.play()
})
時 雨 初
źródło
4

Rozszerz element DOM, obsłuż błąd i ostrożnie degraduj

Poniżej używam funkcji prototypu do zawijania natywnej funkcji odtwarzania DOM, przechwytywania jej obietnicy, a następnie degradowania do przycisku odtwarzania, jeśli przeglądarka zgłosi wyjątek. To rozszerzenie rozwiązuje problem wady przeglądarki i jest typu plug-and-play na każdej stronie ze znajomością elementu docelowego (elementów).

// 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
źródło
Jest to bardzo sprytne podejście, które nie łamie żadnej polityki (ponieważ odtwarzanie i tak się nie rozpoczyna) i zapobiega występowaniu błędów. +1
loretoparisi
3

W moim przypadku musiałem to zrobić

 // 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
źródło
2

Chrome potrzebuje interakcji użytkownika, aby wideo było odtwarzane automatycznie lub odtwarzane przez js (video.play ()). Ale interakcja może być dowolnego rodzaju, w dowolnym momencie. Jeśli klikniesz losowo na stronie, wideo odtworzy się automatycznie. Rozwiązałem wtedy, dodając przycisk (tylko w przeglądarkach Chrome) z napisem „Włącz autoodtwarzanie wideo”. Przycisk nic nie robi, tylko kliknięcie go jest wymaganą interakcją użytkownika dla dalszego filmu.

Alarik
źródło
1

Napotkałem podobny błąd podczas próby odtworzenia pliku audio. Początkowo działało, a potem przestało działać, gdy zacząłem używać markForCheckmetody ChangeDetector w tej samej funkcji, aby wywołać ponowne renderowanie, gdy obietnica rozwiązuje się (miałem problem z renderowaniem widoku).

Kiedy zmienił markForChecksię do detectChangesniego ponownie rozpoczął pracę. Naprawdę nie potrafię wyjaśnić, co się stało, po prostu pomyślałem o rzuceniu tego tutaj, może to komuś pomoże.

King James Enejo
źródło
1

Należy dodać mutedatrybut wewnątrz videoElementswojego kodu, aby kod działał zgodnie z oczekiwaniami. Spójrz poniżej ...

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

Nie zapomnij dodać prawidłowego linku wideo jako źródła

GNETO DOMINIQUE
źródło
0

Miałem problemy z graniem na telefonie z Androidem. Po kilku próbach stwierdziłem, że gdy włączone jest Oszczędzanie danych, nie ma automatycznego odtwarzania:

Nie ma autoodtwarzania, jeśli włączony jest tryb oszczędzania danych . Jeśli tryb oszczędzania danych jest włączony, autoodtwarzanie jest wyłączone w ustawieniach multimediów.

Źródło

Ja robię
źródło
-6

Wpisz Chrome: // flags w pasek adresu

Szukaj: autoodtwarzanie

Zasady autoodtwarzania

Zasada stosowana przy określaniu, czy dźwięk lub wideo może być odtwarzane automatycznie.

- Mac, Windows, Linux, Chrome OS, Android

Ustaw to na „ Żaden gest użytkownika nie jest wymagany

Uruchom ponownie Chrome i nie musisz zmieniać żadnego kodu

DARKSETH23
źródło
24
Nie możesz poprosić każdego użytkownika o zmianę ustawień.
Ashish Jhanwar
2
To mogłoby faktycznie rozwiązać problem dla niektórych osób (kioski, prywatne i lokalne strony internetowe ...), ale flaga została usunięta w Chrome 76. Teraz jedynym rozwiązaniem jest ta odpowiedź
Milan Švehla