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?

122

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?

Steven
fuente
2
Creo que PlayInline es una cosa de iOS.
Josh Lee

Respuestas:

125

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.

Joe
fuente
después de tirarme del pelo durante una hora. esto solucionó mi problema
Andy McCormick
¿Hay alguna forma de habilitar el audio justo después de que el video comienza a reproducirse? Eliminar el muteatributo o configurar el volumeatributo no ayuda.
nikitahl
En MacOs Chrome versión 74.0.3729.131, ambos fragmentos muestran una pantalla en negro
Kamil Kiełczewski
@ KamilKiełczewski El video mostraba una pantalla negra porque srcno era válido. Actualicé el fragmento srcpara que el video se reproduzca automáticamente.
Joe
2
Tuve que hacer en su muted="true"lugar
tgordon18
13

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>
Moiz
fuente
12
  1. Abierto chrome://settings/content/sound
  2. Configuración No se requiere ningún gesto de usuario
  3. Reiniciar Chrome
Ming
fuente
6
Cambios en la política de reproducción automática. Click me
Ming
4
Solo se usa para que el desarrollador pruebe el comportamiento de la política de reproducción automática de Chrome localmente. developers.google.com/web/updates/2017/09/…
Tuan Nguyen
5
Descubrí que la bandera de la línea de comando --autoplay-policy=no-user-gesture-requiredes la forma programática de lograr esta configuración.
nickiaconis
27
Esto solo funciona para su navegador, todos los demás aún se verán afectados
koosa
37
¿Quién vota a favor de esta respuesta? Esto no es superuser.com. Una solución para su máquina local no puede ser una respuesta aceptable.
adripanico
11

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.

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.

Kaiido
fuente
11

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();
}
Eutrepe
fuente
1
Absolutamente cierto e increíble, incluso con Ng8, la última versión de Angular. ¡Angular simplemente no se preocupa por lo que sucede en la plantilla HTML del componente!
Pedro Ferreira
2
Y, con la nueva forma de uso de Angular, @ViewChild()debe establecer la opción estática en verdadero: @ViewChild('videoPlayer', {static: true}) videoplayer: ElementRef; video: HTMLVideoElement; Y luego: this.video = this.videoplayer.nativeElement;@ngOnInit()
Pedro Ferreira
1
Este fue mi problema, silenciado en HTML se ignora por completo y tuve que forzarlo por JS. + 1M a su respuesta después de días de búsqueda
Ignacio Bustos
Esta es la respuesta correcta en mi caso, funcionó perfectamente
Harry .Naeem
Vaya, no puedo creer que realmente necesitaba el silenciamiento del lado de javascript para las vistas de poscarga de SSR angular. Todo este tiempo, pensé que el HTML era el problema.
arao6
7

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

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>
Bernesto
fuente
Este es un enfoque muy inteligente, que no rompe ninguna política (ya que la reproducción no comienza de todos modos) y evita que haya errores. +1
loretoparisi
3

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();
Shobi
fuente
2

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.

Alarik
fuente
1

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.

Rey James Enejo
fuente
1

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

GNETO DOMINIQUE
fuente
0

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

Hago
fuente
-6

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

DARKSETH23
fuente
24
No puede pedir a todos y cada uno de los usuarios que cambien la configuración.
Ashish Jhanwar
2
Esto podría resolver el problema para algunas personas (kioscos, sitios web privados y locales ...), pero la bandera se eliminó en Chrome 76. Ahora la única solución es esta respuesta
Milán Švehla