Come gestire "DOMException non rilevata (promessa): play () non riuscita perché l'utente non ha interagito prima con il documento". sul desktop con Chrome 66?

Ricevo il messaggio di errore ..

DOMException non rilevata (promessa): play () non riuscita perché l'utente non ha interagito prima con il documento.

..quando si tenta di riprodurre un video sul desktop utilizzando la versione 66 di Chrome.

Ho trovato un annuncio che ha iniziato la riproduzione automaticamente su un sito Web, tuttavia, utilizzando il seguente 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>

Così è by-passando AutoPlay bloccante di Chrome V66 veramente così facile come semplicemente aggiungendo i webkit-playsinline="true", playsinline="true"e autoplay=""attributi al <video>elemento? Ci sono conseguenze negative in questo?

Per far funzionare la riproduzione automatica su elementi html 5 dopo l'aggiornamento di Chrome 66 è sufficiente aggiungere la mutedproprietà all'elemento video.

Quindi il tuo attuale 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>

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

Credo che l'aggiornamento di Chrome 66 stia cercando di impedire alle schede di creare rumori casuali nelle schede degli utenti. Ecco perché la proprietà disattivata fa funzionare di nuovo la riproduzione automatica.

La soluzione migliore che ho scoperto è disattivare l'audio del video

HTML

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

1. Aperto chrome://settings/content/sound
2. Impostazione Non è richiesto alcun gesto dell'utente
3. Riavvia Chrome

Rispondere alla domanda a portata di mano ...
No, non è sufficiente avere questi attributi, per poter riprodurre automaticamente un supporto con audio è necessario che un gesto dell'utente sia registrato sul documento.

Ma questa limitazione è molto debole: se hai ricevuto questo gesto dell'utente sul documento principale e il tuo video è stato caricato da un iframe, potresti riprodurlo ...

Quindi prendi ad esempio questo violino , che è solo

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

Al primo caricamento, e se non fai clic da nessuna parte, non verrà eseguito, perché non abbiamo ancora registrato alcun evento.
Ma una volta fatto clic sul pulsante "Esegui" , il documento principale (jsfiddle.net) ha ricevuto un gesto dell'utente e ora il video viene riprodotto, anche se tecnicamente è caricato in un documento diverso.

Ma il seguente frammento, poiché richiede di fare effettivamente clic sul pulsante Esegui frammento di codice , verrà riprodotto automaticamente.

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

Ciò significa che il tuo annuncio è stato probabilmente in grado di essere riprodotto perché hai fornito un gesto dell'utente alla pagina principale.

Ora, tieni presente che Safari e Mobile Chrome hanno regole più rigide di questo e ti richiederanno di attivare effettivamente almeno una volta il play()metodo a livello di programmazione sull'elemento <video>o <audio>dal gestore di eventi utente stesso.

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>

E se non hai bisogno dell'audio, semplicemente non allegarlo ai tuoi file multimediali, anche un video con solo una traccia video può essere riprodotto automaticamente e ridurrà l'utilizzo della larghezza di banda dell'utente.

Per me (nel progetto Angular) questo codice ha aiutato:

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

Prova a usare mousemove event lisentner

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

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

Estendi l'elemento DOM, gestisci l'errore e degradalo con grazia

Di seguito utilizzo la funzione prototipo per avvolgere la funzione di riproduzione DOM nativa, afferrare la sua promessa e quindi degradare a un pulsante di riproduzione se il browser genera un'eccezione. Questa estensione risolve il difetto del browser ed è plug-n-play in qualsiasi pagina con conoscenza dell'elemento o degli elementi di destinazione.

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

Nel mio caso, ho dovuto farlo

 // 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 richiede l'interazione dell'utente affinché il video venga riprodotto automaticamente o riprodotto tramite js (video.play ()). Ma l'interazione può essere di qualsiasi tipo, in qualsiasi momento. Se fai clic su casuale sulla pagina, il video verrà riprodotto automaticamente. Ho risolto quindi, aggiungendo un pulsante (solo sui browser Chrome) che dice "abilita la riproduzione automatica del video". Il pulsante non fa nulla, ma il semplice clic è l'interazione richiesta dall'utente per qualsiasi ulteriore video.

Ho riscontrato un errore simile durante il tentativo di riprodurre un file audio. All'inizio funzionava, poi ha smesso di funzionare quando ho iniziato a utilizzare il markForCheckmetodo ChangeDetector nella stessa funzione per attivare un nuovo rendering quando una promessa si risolve (ho avuto un problema con il rendering della vista).

Quando ho cambiato il markForCheckin detectChangesha ricominciato a funzionare. Non riesco davvero a spiegare cosa sia successo, ho solo pensato di lasciarlo qui, forse avrebbe aiutato qualcuno.

Dovresti aver aggiunto l' mutedattributo all'interno del tuo videoElementperché il tuo codice funzioni come previsto. Guarda qui sotto ..

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

Non dimenticare di aggiungere un collegamento video valido come fonte

Ho avuto dei problemi a giocare su un telefono Android. Dopo alcuni tentativi ho scoperto che quando è attivo Data Saver non c'è riproduzione automatica:

Non c'è riproduzione automatica se la modalità Risparmio dati è abilitata. Se la modalità Risparmio dati è abilitata, la riproduzione automatica è disabilitata nelle impostazioni Media.

fonte

Digita Chrome: // flags nella barra degli indirizzi

Cerca: riproduzione automatica

Politica di riproduzione automatica

Criterio utilizzato per decidere se consentire la riproduzione automatica dell'audio o del video.

- Mac, Windows, Linux, Chrome OS, Android

Impostalo su " Non è richiesto alcun gesto dell'utente "

Riavvia Chrome e non devi modificare alcun codice