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?

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?

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.

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

HTML

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

1. otwarty chrome://settings/content/sound
2. Ustawienie Nie jest wymagany żaden gest użytkownika
3. Uruchom ponownie Chrome

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.

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>

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.

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

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

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>

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

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.

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.

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

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

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