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


135

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.


a volte funziona? o non funziona affatto ... ecco un esempio w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay che controllo con Chrome e funziona.
tanaydin

In alcune pagine non funziona affatto
Adam Bubela

Affrontando lo stesso problema, ha funzionato bene una settimana fa e senza alcuna modifica ha smesso di funzionare. Forse è un aggiornamento del browser, molto fastidioso dover riprodurre manualmente tutti i tag video tramite javascript
bingeScripter

Non funziona per me in Chrome.
Bob the Builder

Risposte:


263

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>

1
Oppure puoi programmare con jQuery $("videoID").get(0).play(); stackoverflow.com/questions/4646998/…
Penguin

8
O come questo:$("video[autoplay]").each(function(){ this.play(); });
Martin

2
ancora problema se non è disattivato developers.google.com/web/updates/2017/09/…
dovid

5
questo non funzionerà più senza l'interazione dell'utente AFAIK
webkit


94

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.

3
Ho riscontrato questo problema in Safari 11 in cui un video in background (senza audio) non veniva riprodotto automaticamente. Aggiunta mutede ha autoplayfatto il trucco. Grazie!
dmbaughman

1
Allora perché allora la riproduzione automatica, CON audio attivo, funziona per YouTube? Ha funzionato in questo modo sin dall'inizio del sito.
Xavier

32

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.


2
Buona chiamata che non funziona con .wrap (). Tuttavia, per quanto ne so, il codice necessita di .get (0) per funzionare: $ ("# vid"). Get (0) .play ();
mattsoave

3
@mattsoave .get(0)o semplicemente$('#vid')[0].play()
pmrotule

Ottobre 2017, il video che non viene riprodotto automaticamente nonostante l'attributo nel tag è ancora un problema in Safari. L'uso di [0] .play () come suggerito da mattsoave / pmrotule ha risolto il problema.
Don Cullen

25

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>

Il commento di John Pallett sulla nuova politica . È Product Manager e Media Muter di Google Chrome .
Doomjunky

24

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

Funziona con l'ultimo Chrome su Windows8
vladkras

Su Crome se aggiungo l'audio disattivato disabilitato. Non lo voglio
lisarko8077

17

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>

3
Ciò non aggiunge nulla di nuovo. La risposta accettata lo menziona già. Anche la seconda risposta entra nei dettagli.
Samuel Philipp

12

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'attributo precaricamento viene ignorato dal browser se è presente la riproduzione automatica.
Sedat Başar

9

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

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

2
il motivo è che stai aspettando che il video venga caricato nel buffer, quindi lo riproduci.
Joseph Briggs

9

Prova questo:

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

5

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

Solo questa soluzione mi ha aiutato, <video autoplay muted ...>...</video>non ha funzionato ...


3

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

Niente ha funzionato su Chrome ha funzionato neanche per me. Con il .play () fix (hack) sopra ho ricevuto una "DOMException non rilevata (promessa): la richiesta play () è stata interrotta da una chiamata a pause ()." nella console. C'erano alcune altre funzioni jQuery sulla pagina, quindi ho pensato che un timer avrebbe dato a Chrome abbastanza tempo per risolverlo da solo. Ha funzionato. Ho impostato un timer di 0,5 secondi in $ (document) .ready ()
Da Orbonia il

3

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.



2

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.


2

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

2

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;

1

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/


0

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.


0

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

0

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.


0

Prova a scambiare autoPlayper autoplay.

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.