Cómo manejar "No detectado (en promesa) DOMException: play () falló porque el usuario no interactuó con el documento primero". en el escritorio con Chrome 66?

Recibo el mensaje de error ...

No detectado (en promesa) DOMException: play () falló porque el usuario no interactuó con el documento primero.

.. al intentar reproducir un video en el escritorio con la versión 66 de Chrome.

Encontré un anuncio que comenzó a reproducirse automáticamente en un sitio web, sin embargo, usando el siguiente 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>

Así es pasando por alto bloqueador de reproducción automática de Chrome v66 realmente tan fácil como simplemente añadiendo los webkit-playsinline="true", playsinline="true"y autoplay=""atributos al <video>elemento? ¿Hay consecuencias negativas para esto?

Para que la reproducción automática en los elementos html 5 funcione después de la actualización de Chrome 66, solo necesita agregar la mutedpropiedad al elemento de video.

Entonces, su video HTML actual

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

Creo que la actualización de Chrome 66 está tratando de evitar que las pestañas creen ruido aleatorio en las pestañas de los usuarios. Es por eso que la propiedad silenciada hace que la reproducción automática vuelva a funcionar.

La mejor solución que encontré es silenciar el video

HTML

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

1. Abierto chrome://settings/content/sound
2. Configuración No se requiere ningún gesto de usuario
3. Reiniciar Chrome

Respondiendo la pregunta en cuestión ...
No, no es suficiente tener estos atributos, para poder reproducir automáticamente un medio con audio, necesita tener un gesto de usuario registrado en su documento.

Pero esta limitación es muy débil: si recibió este gesto de usuario en el documento principal y su video se cargó desde un iframe, entonces podría reproducirlo ...

Tomemos, por ejemplo, este violín , que es sólo

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

En la primera carga, y si no hace clic en ningún lado, no se ejecutará, porque aún no tenemos ningún evento registrado.
Pero una vez que hace clic en el botón "Ejecutar" , el documento principal (jsfiddle.net) recibió un gesto de usuario y ahora se reproduce el video, aunque técnicamente está cargado en un documento diferente.

Pero el siguiente fragmento, dado que requiere que haga clic en el botón Ejecutar fragmento de código , se reproducirá automáticamente.

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

Esto significa que su anuncio probablemente pudo reproducirse porque proporcionó un gesto de usuario a la página principal.

Ahora, tenga en cuenta que Safari y Mobile Chrome tienen reglas más estrictas que eso, y requerirán que active al menos una vez el play()método programáticamente en el elemento <video>o <audio>desde el controlador de eventos del usuario.

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>

Y si no necesita el audio, simplemente no lo adjunte a sus medios, un video con solo una pista de video también puede reproducirse automáticamente y reducirá el uso de ancho de banda de su usuario.

Para mí (en el proyecto Angular) este código ayudó:

En HTML debes agregar autoplay muted

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

Intenta usar mousemove event lisentner

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

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

Extienda el elemento DOM, maneje el error y degrade con gracia

A continuación, uso la función de prototipo para ajustar la función de reproducción DOM nativa, aprovechar su promesa y luego degradarla a un botón de reproducción si el navegador arroja una excepción. Esta extensión soluciona las deficiencias del navegador y es plug-n-play en cualquier página con conocimiento de los elementos de destino.

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

En mi caso tuve que hacer esto

 // 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 necesita una interacción del usuario para que el video se reproduzca automáticamente o se reproduzca a través de js (video.play ()). Pero la interacción puede ser de cualquier tipo, en cualquier momento. Si simplemente hace clic al azar en la página, el video se reproducirá automáticamente. Lo resolví entonces, agregando un botón (solo en navegadores Chrome) que dice "habilitar reproducción automática de video". El botón no hace nada, pero simplemente hacer clic en él es la interacción del usuario requerida para cualquier otro video.

Encontré un error similar al intentar reproducir un archivo de audio. Al principio, estaba funcionando, luego dejó de funcionar cuando comencé a usar el markForCheckmétodo de ChangeDetector en la misma función para activar una repetición cuando se resuelve una promesa (tuve un problema con la representación de la vista).

Cuando cambié el markForChecka detectChanges, comenzó a funcionar nuevamente. Realmente no puedo explicar lo que sucedió, solo pensé en dejar esto aquí, tal vez ayudaría a alguien.

Debería haber agregado un mutedatributo dentro videoElementde su código para que funcione como se esperaba. Mira abajo ...

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

No olvide agregar un enlace de video válido como fuente

Tuve algunos problemas al jugar en un teléfono Android. Después de algunos intentos, descubrí que cuando el Ahorro de datos está activado, no hay reproducción automática:

No hay reproducción automática si el modo de ahorro de datos está habilitado. Si el modo de ahorro de datos está habilitado, la reproducción automática está deshabilitada en la configuración de Medios.

Fuente

Escribe Chrome: // banderas en la barra de direcciones

Búsqueda: Autoplay

Política de reproducción automática

Política utilizada para decidir si se permite la reproducción automática de audio o video.

- Mac, Windows, Linux, Chrome OS, Android

Establezca esto en " No se requiere ningún gesto de usuario "

Reinicia Chrome y no tienes que cambiar ningún código