javascript - reproducir - video html5 android

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

Question

Recibo el mensaje de error ...

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

..cuando intentas reproducir video en el escritorio con Chrome versión 66.

Encontré un anuncio que comenzó a reproducirse automáticamente en un sitio web, pero utilizando 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>

Entonces, ¿pasar por alto el bloqueador de reproducción automática de Chrome v66 es tan fácil como agregar los webkit-playsinline="true" , playsinline="true" y autoplay="" al elemento <video> ? ¿Hay alguna consecuencia negativa para esto?

Answer 1

ACTUALIZAR

Si esta técnica ya no funciona, hay otra opción. Puede incluir un audio breve y muy silencioso (-60db) y reproducirlo dentro del controlador de clic del botón oculto. Después de eso, todos los demás archivos de audio / video podrán reproducirse sin una interacción directa del usuario. Puede tomar un audio silencioso de http://adventure.land/sounds/loops/empty_loop_for_js_performance.wav y cortarlo a medio segundo (o menos).

Hay una solución muy fácil: solo agrega un BOTÓN a tu página, dale estilo para que sea invisible y luego llama al método button.click() antes de play()

Funciona a las mil maravillas en Chromium versión 70.0.3538.67 (versión oficial) (64 bits)

var btn = document.getElementById(''btn'');
document.addEventListener(btn,myPlay,false);
btn.click();

function myPlay()
{
  document.getElementById(''movie'').play();
}

<video
    title="Advertisement" id="movie"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm"
    ></video>
    <button type="button" style="z-index:-1;opacity:0;position: absolute;left:-1000px;" id="btn"></button>

Answer 2

1. Abrir chrome://flags/#autoplay-policy
2. Configuración No se requiere ningún gesto del usuario
3. Relanzar Chrome

Answer 3

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 solo hace clic al azar en la página, el video se reproducirá automáticamente. Entonces resolví, agregando un botón (solo en los navegadores Chrome) que dice "habilitar reproducción automática de video". El botón no hace nada, pero solo hacer clic en él es la interacción requerida por el usuario para cualquier video adicional.

Answer 4

Debería haber agregado un atributo muted dentro de su videoElement para que su código funcione como se esperaba. Mira abajo ...

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

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

Answer 5

Encontré un error similar al intentar reproducir un archivo de audio. Al principio, estaba funcionando, luego dejó de funcionar cuando comencé a usar el método markForCheck de markForCheck en la misma función para activar un re-render cuando se resuelve una promesa (tuve un problema con el renderizado de vistas).

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

Answer 6

Escribe Chrome: // flags en la barra de direcciones

Búsqueda: Reproducción automática

Política de reproducción automática

Política utilizada al 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 del usuario "

Vuelve a iniciar Chrome y no tendrás que cambiar ningún código.

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

Answer 8

La mejor solución que descubrí es silenciar el video

HTML

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

Answer 9

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

En HTML, debe agregar la 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();
}

Answer 10

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

Entonces, tu 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 detener las pestañas creando 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.

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

Así que tome por ejemplo este violín , que es solo

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

En la primera carga, y si no hace clic en ningún lado, no se ejecutará, porque todavía 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, ya 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 método play() programación 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 se puede reproducir automáticamente y reducirá el uso de ancho de banda de su usuario.

Answer 12

Tuve algunos problemas jugando en el teléfono Android. Después de algunos intentos, descubrí que cuando Data Saver 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 se deshabilita en la configuración de medios.

Source

Answer 13

Extiende el elemento DOM, maneja el error y degrada con gracia

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

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