Autoplay video HTML5 su iPhone

92

Ho uno strano problema. Provo a creare un sito Web con un video di sfondo in loop. Il codice è simile a questo:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

Espandi lo snippet

Funziona perfettamente sulla maggior parte dei browser (IE lotta con questa cosa che si adatta agli oggetti, ma non mi dispiace) ma su iPhone il video non viene riprodotto automaticamente ma su iPad lo fa. Ho già letto le nuove norme per iOS e penso di soddisfare i requisiti (altrimenti l'iPad non viene riprodotto automaticamente). Ho fatto altri test:

La rimozione dei div sovrapposti non lo risolverà
La rimozione di z-index non lo risolverà
Wifi o cellulare non fa la differenza
Anche la dimensione del file video non fa la differenza

Sto sbagliando o semplicemente iPhone non riproduce automaticamente i video e richiede sempre l'interazione? Mi interessa solo iOS 10, so che i requisiti erano diversi su iOS 9

— SeBa
fonte

Potresti essere in grado di trovare un aiuto qui: stackoverflow.com/questions/41360490/… Personalmente, non ho ancora ricevuto alcun video da riprodurre automaticamente su un iPhone, anche dopo aver seguito tutti quei suggerimenti e le politiche di Apple.

— Marco

Mi ci sono volute ore per capirlo. Per cercare di risparmiare ore a tutti gli altri ho riassunto le mie scoperte in un blog. Spero che sia d'aiuto. medium.com/@BoltAssaults/…

— BoltCoder

227

L' playsinlineattributo aiuta?

Ecco cosa ho:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

Vedi il commento playsinlinequi: https://webkit.org/blog/6784/new-video-policies-for-ios/

— Pete Florence
fonte

1

Alleluia! Grazie per questo, avevo provato circa una dozzina di altre soluzioni senza alcun risultato.

— tolmark

24

playsinlineha funzionato per me in combinazione con il mutedtenere presente la stranezza della modalità a basso consumo su iPhone

— Ken

1

Questa è la risposta.

— JCraine

1

playsinlineSalvato la giornata !!!! Grazie uomo. A proposito, i nuovi criteri del browser richiedono che se si desidera avviare automaticamente un video, avviarlo disattivato o non sarà possibile farlo. +1 a @ken Esempio per chrome: [ developers.google.com/web/updates/2017/09/…

— Nuno Prata

22

Se stai usando Reagire, nota che l'attributo playsinlinedeve essere scritto in camelCase: playsInline. Altrimenti non funzionerà.

— Quentin D,

64

iOs 10+ consente la riproduzione automatica del video in linea. ma devi disattivare la "Modalità basso consumo" sul tuo iPhone.

— Dilip Godhani
fonte

2

ottimo suggerimento ma ho una domanda su questo che ho inviato: stackoverflow.com/questions/50400902/…

— Mathieu

8

Ho passato l'ultima ora a cercare di capire perché i miei video non venivano riprodotti automaticamente. Grazie per questo!

— lior

2

Grazie per questo!

— Nikita Rogatnev

4

Vale la pena ricordare che non possiamo controllare il dispositivo dell'utente e disattivare la modalità di risparmio energetico. L'unica cosa che possiamo fare è chiedere all'utente di "Disattivare la modalità di risparmio energetico" per avere un'esperienza migliore

— Muhammad Osama

1

È successo anche a me e mi ha fatto impazzire finché non ho trovato il tuo posto. Stavo già guardando le specifiche di Safari 11 e 11.1 se forse disabilitavano completamente la riproduzione automatica, ma era solo la modalità a basso consumo ... la vita di uno sviluppatore può essere difficile. :-)

— haeki

8

Ecco il piccolo trucco per superare tutte le difficoltà che hai per la riproduzione automatica dei video in un sito Web:

Controlla che il video sia in riproduzione o meno.
Attiva la riproduzione del video su eventi come il clic o il tocco del corpo.

Nota: alcuni browser non consentono la riproduzione automatica dei video a meno che l'utente non interagisca con il dispositivo.

Quindi gli script per verificare se il video viene riprodotto sono:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

Quindi puoi semplicemente riprodurre automaticamente il video allegando i listener di eventi al corpo:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

Nota: autoplay attributo è molto semplice e deve essere aggiunto al tag video già diverso da questi script.

Puoi vedere l'esempio di lavoro con il codice qui a questo link:

Come riprodurre automaticamente il video quando il dispositivo è in modalità di risparmio energetico / modalità di salvataggio dei dati / problema con il browser safari

— Shakti
fonte

0

Ho avuto un problema simile e ho provato più soluzioni. L'ho risolto implementando 2 considerazioni.

Utilizzo dangerouslySetInnerHtmlper incorporare il <video>codice. Per esempio:

<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
    </video>`}}
/>

Ridimensionamento del peso del video. Ho notato che il mio iPhone non riproduce automaticamente i video superiori a 3 megabyte . Quindi ho utilizzato uno strumento di compressione online ( https://www.mp4compress.com/ ) per passare da 4 MB a meno di 500 kb

Inoltre, grazie a @boltcoder per la sua guida: Riproduzione automatica di video HTML5 con audio disattivato utilizzando React su dispositivo mobile (Safari / iOS 10+)

— maxrojas
fonte