La riproduzione automatica del video non funziona in Safari e nel browser desktop Chrome

Ho passato molto tempo a cercare di capire perché il video incorporato come qui:

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

inizia la riproduzione automaticamente una volta che la pagina viene caricata in FireFox ma non può eseguire la riproduzione automatica nei browser basati su Webkit. Questo è successo solo su alcune pagine casuali. Finora non sono riuscito a trovare la causa. Ho il sospetto che alcuni tag non chiusi o JS estesi creati dagli editor di CMS.

La soluzione migliore che ho potuto ottenere è stata l'aggiunta di questo codice subito dopo il file </video>

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

... non è carino ma in qualche modo funziona.

AGGIORNAMENTO Recentemente molti browser possono riprodurre automaticamente i video solo con l'audio disattivato, quindi dovrai aggiungere anche l' mutedattributo al tag video

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

Dopo aver utilizzato jQuery play()o la manipolazione DOM come suggerito dalle altre risposte, non funzionava ancora (il video non veniva riprodotto automaticamente) in Chrome per Android (versione 56.0).

Come da questo post in developers.google.com , da Chrome 53, l'opzione di riproduzione automatica viene rispettata dal browser, se l'audio del video è disattivato .

Pertanto, l'utilizzo degli autoplay mutedattributi nel tag video consente la riproduzione automatica del video nei browser Chrome dalla versione 53.

Estratto dal link sopra:

La riproduzione automatica con audio disattivato per i video è supportata da Chrome per Android a partire dalla versione 53. La riproduzione verrà avviata automaticamente per un elemento video una volta che viene visualizzato se entrambi autoplaye mutedsono impostati [...]

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

• La riproduzione automatica disattivata è supportata da Safari su iOS 10 e versioni successive.
• La riproduzione automatica, disattivata o meno, è già supportata su Android da Firefox e UC Browser: non bloccano alcun tipo di riproduzione automatica.

Succede che Safari e Chrome sul desktop non amano la manipolazione del DOM attorno al tag video. Non attiveranno l'ordine di riproduzione quando l'attributo autoplay è impostato anche se l'evento canplaythrough si è attivato quando il DOM attorno al tag video è cambiato dopo il caricamento iniziale della pagina. Fondamentalmente ho avuto lo stesso problema fino a quando non ho eliminato un jQuery .wrap () attorno al tag video e successivamente è stato riprodotto automaticamente come previsto.

Google ha appena cambiato la sua politica per i video con riproduzione automatica, deve essere muted

Puoi controllare qui

quindi aggiungi semplicemente disattivato

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

Per me il problema era che l' mutedattributo doveva essere aggiunto all'interno del videotag. Vale a dire:

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

Chrome non consente la riproduzione automatica di video con audio attivato, quindi assicurati di aggiungere l' mutedattributo al videotag in questo modo

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

Ho appena ricevuto lo stesso problema con il mio 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>

Dopo la ricerca, ho trovato una soluzione:

Se imposto gli attributi "preload" su "true" il video si avvia normalmente

L'aggiunta del codice seguente in fondo alla pagina ha funzionato per me. Non so perché funziona :(

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

Prova questo:

  <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 questa soluzione mi ha aiutato, <video autoplay muted ...>...</video>non ha funzionato ...

Nessuna delle altre risposte ha funzionato per me. La mia soluzione alternativa era attivare un clic sul video stesso; hacky (a causa del timeout necessario) ma funziona bene:

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

Di recente abbiamo risolto un problema simile con un video incorporato e abbiamo scoperto che la riproduzione automatica e gli attributi disattivati ​​non erano sufficienti per la nostra implementazione.

Abbiamo aggiunto un terzo attributo "playsinline" al codice e ha risolto il problema per gli utenti iOS.

Questa correzione è specifica per i video che devono essere riprodotti in linea. Da https://webkit.org/blog/6784/new-video-policies-for-ios/ :

Su iPhone, gli elementi potranno ora essere riprodotti in linea e non entreranno automaticamente in modalità a schermo intero quando inizia la riproduzione. gli elementi senza attributi playsinline continueranno a richiedere la modalità a schermo intero per la riproduzione su iPhone. Quando si esce dalla modalità a schermo intero con un gesto di pizzicamento, gli elementi senza playinline continueranno a essere riprodotti in linea.

Google ha aggiornato la politica di riproduzione automatica. La riproduzione automatica funziona solo in modalità silenziosa. Controlla il link https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Prova questo:

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

Questo è il modo in cui lo faccio normalmente. loop, controlli e autoplay non richiedono un valore, sono attributi booleani.

Ciò è dovuto al fatto che ora Chrome impedisce la riproduzione automatica nei video html5, quindi per impostazione predefinita non consentiranno la riproduzione automatica. quindi possiamo modificare queste impostazioni utilizzando le impostazioni del flag di Chrome. questo non è possibile per il caso normale, quindi ho trovato un'altra soluzione. funziona perfettamente ... (aggiungi 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();  

Ho trascorso due ore a provare tutte le soluzioni sopra menzionate.

Questo è ciò che alla fine ha funzionato per me:

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

Su Safari Iphone quando il burro è basso e l'iPhone è in modalità Risparmio energia non verrà riprodotto automaticamente, anche se hai i seguenti attributi: autoplay, loop, mute, playsinline set on your video html tag.

Andare in giro che ho trovato funzionante è avere un evento gestuale dell'utente per attivare la riproduzione del video:

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

puoi leggere ulteriori informazioni sui gesti dell'utente e sui criteri video per iOS nel sito webkit:

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

Ho avuto un caso in cui aveva qualcosa a che fare con l'ordine dei diversi tipi di file. Prova a cambiarlo e vedi se aiuta.

Ho iniziato riproducendo tutti i video visibili, ma i vecchi telefoni non funzionavano bene. Quindi in questo momento riproduco l'unico video più vicino al centro della finestra e metto in pausa il resto. Vanilla JS. Puoi scegliere quale algoritmo preferisci.

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

Ho risolto lo stesso problema con,

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

Devi avviare i video dopo che la pagina è stata mostrata.

Prova a scambiare autoPlayper autoplay.

A volte sembra essere case sensitive. Molto bizzarro perché ha funzionato come autoplayper me, ma solo se lo includevocontrols