La reproducción automática de video no funciona en el navegador de escritorio Safari y Chrome

Pasé mucho tiempo tratando de descubrir por qué el video incrustado como aquí:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

comienza a reproducirse automáticamente una vez que la página se carga en Firefox pero no puede reproducirse automáticamente en navegadores basados ​​en Webkit. Esto solo sucedió en algunas páginas aleatorias. Hasta ahora no pude encontrar la causa. Sospecho que algunas etiquetas no cerradas o JS extenso creado por editores de CMS.

La mejor solución que pude obtener fue agregar este código justo después de </video>

<script>
    document.getElementById('vid').play();
</script>

... no es bonito pero de alguna manera funciona.

ACTUALIZACIÓN Recientemente, muchos navegadores solo pueden reproducir automáticamente los videos con el sonido apagado, por lo que también deberá agregar un mutedatributo a la etiqueta de video

<video autoplay muted>
...
</video>

Después de usar jQuery play()o DOM maniupulation como lo sugieren las otras respuestas, todavía no funcionaba (el video no se reproducía automáticamente) en Chrome para Android (Versión 56.0).

Según esta publicación en developers.google.com , desde Chrome 53, el navegador respeta la opción de reproducción automática, si el video está silenciado .

Por lo tanto, el uso de autoplay mutedatributos en la etiqueta de video permite que el video se reproduzca automáticamente en los navegadores Chrome desde la versión 53.

Extracto del enlace de arriba:

La reproducción automática silenciada para video es compatible con Chrome para Android a partir de la versión 53. La reproducción comenzará automáticamente para un elemento de video una vez que aparezca si ambos autoplay y mutedse establecen [...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• La reproducción automática silenciada es compatible con Safari en iOS 10 y versiones posteriores.
• La reproducción automática, ya sea silenciada o no, ya es compatible con Android en Firefox y UC Browser: no bloquean ningún tipo de reproducción automática.

Sucede que a Safari y Chrome en el escritorio no les gusta la manipulación DOM alrededor de la etiqueta de video. No activarán el orden de reproducción cuando se establezca el atributo de reproducción automática, incluso si el evento de reproducción se ha activado cuando el DOM alrededor de la etiqueta de video ha cambiado después de la carga inicial de la página. Básicamente tuve el mismo problema hasta que eliminé un .wrap () jQuery alrededor de la etiqueta del video y luego se reprodujo automáticamente como se esperaba.

Google acaba de cambiar su política de reproducción automática de videos, tiene que ser muted

Puedes consultar aquí

así que solo agrega silenciado

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Para mí, el problema era que era mutednecesario agregar el atributo dentro de la videoetiqueta. Es decir:

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

Chrome no permite la reproducción automática de video con sonido activado, así que asegúrese de agregar un mutedatributo a la videoetiqueta como este

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

Ahora tengo el mismo problema con mi video

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

Después de la búsqueda, he encontrado una solución:

Si configuro los atributos de "precarga" en "verdadero", el video comenzará normalmente

Agregar el siguiente código en la parte inferior de la página funcionó para mí. No sé por qué funciona :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

Prueba esto:

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>

var video = document.querySelector('video'); video.muted = true; video.play()

Solo esta solución me ayudó, <video autoplay muted ...>...</video>no funcionó ...

Ninguna de las otras respuestas funcionó para mí. Mi solución consistía en activar un clic en el video; hacky (debido al tiempo de espera que se necesita) pero funciona bien:

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);

Recientemente abordamos un problema similar con un video incrustado y descubrimos que la reproducción automática y los atributos silenciados no eran suficientes para nuestra implementación.

Agregamos un tercer atributo "playsinline" al código y solucionó el problema para los usuarios de iOS.

Esta solución es específica para los videos que se reproducirán en línea. De https://webkit.org/blog/6784/new-video-policies-for-ios/ :

En iPhone, los elementos ahora podrán reproducirse en línea y no entrarán automáticamente en modo de pantalla completa cuando comience la reproducción. los elementos sin atributos de playinline seguirán requiriendo el modo de pantalla completa para reproducir en iPhone. Al salir de la pantalla completa con un gesto de pellizco, los elementos sin playinline continuarán jugando en línea.

Política de reproducción automática actualizada de Google. La reproducción automática solo funciona en modo silencio. Consulte el enlace https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Prueba esto:

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

Así es como lo hago normalmente. loop, controles y reproducción automática no requieren un valor, son atributos booleanos.

Esto se debe a que ahora Chrome está impidiendo la reproducción automática en el video html5, por lo que por defecto no permitirán la reproducción automática. para que podamos cambiar esta configuración usando la configuración de la bandera de Chrome. Esto no es posible para el caso normal, así que he encontrado otra solución. esto funciona perfectamente ... (agregar preload = "auto")

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">

var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();  

Pasé dos horas probando todas las soluciones mencionadas anteriormente.

Esto es lo que finalmente funcionó para mí:

var vid = document.getElementById("myVideo");
vid.muted = true;

En el iPhone de safari cuando la mantequilla es baja y el iPhone está en modo de bajo consumo , no se reproducirá automáticamente, incluso si tiene los siguientes atributos: reproducción automática, bucle, silenciado, reproducción en línea configurado en su etiqueta html de video.

Recorrer que encontré que trabajar es tener un evento de gesto de usuario para activar la reproducción de video:

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

Puede leer más sobre el gesto del usuario y las Políticas de video para iOS en el sitio webkit:

https://webkit.org/blog/6784/new-video-policies-for-ios/

Tuve un caso en el que tenía algo que ver con el orden de los diferentes tipos de archivos. Intente cambiarlo y vea si eso ayuda.

Comencé reproduciendo todos los videos visibles, pero los teléfonos viejos no funcionaban bien. Así que en este momento reproduzco el video más cercano al centro de la ventana y detengo el resto. Vanilla JS. Puedes elegir qué algoritmo prefieres.

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}

Resolví el mismo problema con

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

Debes iniciar los videos después de que se haya mostrado la página.

Intenta cambiar autoPlayporautoplay .

Parece ser sensible a mayúsculas y minúsculas a veces. Muy extraño porque funcionó autoplaypara mí, pero solo si incluíacontrols