Puoi riprodurre automaticamente i video HTML5 sull'iPad?

123

L' attributo dei <video>tag autoplay="autoplay"funziona bene in Safari.

Durante il test su un iPad, il video deve essere attivato manualmente.

Pensavo fosse un problema di caricamento, quindi ho eseguito un ciclo per verificare lo stato del supporto:

videoPlay: function(){
    var me = this;
    console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
    if ($("#periscopevideo").get(0).readyState != 4){
      setTimeout(function(){me.videoPlay();}, 300);
    }
    else {
      $("#periscopevideo").get(0).play();
    }
}

Lo stato rimane 0sull'iPad. Sul mio desktop safari, va bene 0, 1e finalmente 4. Sull'iPad, raggiunge solo 4se tocco manualmente la freccia "play".

Inoltre, anche la chiamata $("#periscopevideo").get(0).play()da un clic tramite onClickfunziona.

Ci sono limitazioni da parte di Apple riguardo alla riproduzione automatica? (Sto eseguendo iOS 5+ tra l'altro).

— Jem
fonte

Correlati / duplicati: stackoverflow.com/questions/2841966/... , stackoverflow.com/questions/4259928/...

— apsillers

Forse dovremmo guardare rilevamento del browser, e se non si dovrebbe chiamare playVideo (): stackoverflow.com/questions/26895492/...

— Redtopia

Questo lavoro per me github.com/Stanko/html-canvas-video-player

— dimitar

Post di

— Matthias M

opera mini in ios supporta la riproduzione automatica per impostazione predefinita, mentre chrome, firefox e safari non lo fanno e non offrono opzioni per l'attivazione.

— anonimo

156

Aggiornamento iOS 10

Il divieto di riproduzione automatica è stato revocato a partire da iOS 10, ma con alcune limitazioni (ad esempio, A può essere riprodotto automaticamente se non c'è traccia audio).

Per vedere un elenco completo di queste restrizioni, vedere i documenti ufficiali: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9 e versioni precedenti

A partire da iOS 6.1, non è più possibile riprodurre automaticamente i video sull'iPad.

La mia ipotesi sul motivo per cui hanno disabilitato la funzione di riproduzione automatica?

Bene, poiché molti proprietari di dispositivi hanno limiti di utilizzo dei dati / larghezza di banda sui propri dispositivi, penso che Apple abbia ritenuto che l'utente stesso dovesse decidere quando avviare l'utilizzo della larghezza di banda.

Dopo un po 'di ricerca ho trovato il seguente estratto nella documentazione Apple in merito alla riproduzione automatica su dispositivi iOS per confermare la mia ipotesi:

"Apple ha deciso di disabilitare la riproduzione automatica dei video sui dispositivi iOS, tramite implementazioni di script e attributi.

In Safari, su iOS (per tutti i dispositivi, compreso l'iPad), dove l'utente può essere su una rete cellulare ed essere addebitato per unità di dati, il precaricamento e la riproduzione automatica sono disabilitati. Nessun dato viene caricato finché l'utente non lo avvia. "- Documentazione Apple.

Ecco un avviso separato presente nella pagina di riferimento HTML5 di Safari sul motivo per cui i media incorporati non possono essere riprodotti in Safari su iOS:

Avviso : per evitare download non richiesti su reti cellulari a spese dell'utente, i contenuti multimediali incorporati non possono essere riprodotti automaticamente in Safari su iOS: l'utente avvia sempre la riproduzione. Un controller viene fornito automaticamente su iPhone o iPod touch una volta avviata la riproduzione, ma per iPad è necessario impostare l'attributo dei controlli o fornire un controller utilizzando JavaScript.

Ciò significa (in termini di codice) che i metodi play()e JavaScript load()sono inattivi fino a quando l'utente non avvia la riproduzione, a meno che il metodo play()o non load()venga attivato dall'azione dell'utente (ad esempio un evento di clic).

Fondamentalmente, un pulsante di riproduzione avviato dall'utente funziona, ma un onLoad="play()"evento no.

Ad esempio, questo riprodurrebbe il film:

<input type="button" value="Play" onclick="document.myMovie.play()">

Considerando che quanto segue non farebbe nulla su iOS:

<body onload="document.myMovie.play()">

— dsgriffin
fonte

1

Hmmm 3 mesi di creazione di una sveglia online per iPhone Safari buttato via! Noi (sleep.fm) abbiamo trovato un modo per mantenere il telefono sveglio mentre l'app è aperta, ma ora con iOS 6.1 l'audio dell'allarme non viene riprodotto. Ha funzionato bene in iOS 6.0. C'è un lavoro in giro?

— chaser7016

1

oh aspetta, la nostra sveglia web mobile (sleep.fm) per iPhone Safari è di nuovo funzionante, quindi ci sono soluzioni per la mancanza del supporto per la riproduzione automatica html5.

— chaser7016

1

@ Jonah1289 Secondo il tuo post sul blog su Sleep.fm Brian Cavalier ha twittato un link GitHub con il seguente titolo Riproduzione automatica dell'audio su ipad o iphone utilizzando webkitaudiocontext invece del tag audio Potrebbe essere un buon punto di partenza.

— Francisco

1

Maggiori dettagli, per favore: quali soluzioni alternative esistono per la mancanza del supporto per la riproduzione automatica?

— Umopepisdn

11

Quello che dovrebbero fare è consentire la riproduzione automatica quando su Wi-Fi e avere la riproduzione manuale o chiedere all'utente che il video vuole essere riprodotto automaticamente quando è su una rete mobile.

— Ric

16

Voglio iniziare dicendo che mi rendo conto che questa domanda è vecchia e ha già una risposta accettata; ma, come sfortunato utente di Internet che ha usato questa domanda come mezzo per finire solo per essere smentito poco dopo (ma non prima di aver turbato un po 'il mio cliente), voglio aggiungere i miei pensieri e suggerimenti.

Mentre @DSG e @Giona hanno ragione e non c'è niente di sbagliato nelle loro risposte, c'è un meccanismo creativo che puoi impiegare per "aggirare", per così dire, questa limitazione. Ciò non significa che sto perdonando l'elusione di questa funzione, al contrario, ma solo alcuni meccanismi in modo che un utente "si senta" ancora come se un file video o audio fosse "riprodotto automaticamente".

La soluzione rapida è nascondere un tag video da qualche parte sulla pagina mobile, poiché ho creato un sito reattivo, lo faccio solo per schermi più piccoli. Il tag video (esempi HTML e jQuery):

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

Con quello nascosto nella pagina, quando un utente "fa clic" per guardare un film (ancora l'interazione dell'utente, non c'è modo di aggirare tale requisito) invece di navigare in una pagina di visualizzazione secondaria, carico il video nascosto. Questo funziona principalmente perché il tag multimediale non è realmente utilizzato ma invece promosso a un'istanza Quicktime, quindi non è affatto necessario avere un elemento video visibile. Nel gestore per "clic" (o "touchend" su dispositivo mobile).

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

E viola. Per quanto riguarda l'UX, un utente fa clic su un video per riprodurlo e Quicktime apre la riproduzione del video che ha scelto. Ciò rimane entro il limite che i video possono essere riprodotti solo tramite l'azione dell'utente, quindi non impongo i dati a chiunque non decida di guardare un video con questo servizio. L'ho scoperto quando ho cercato di capire come esattamente Youtube lo abbia fatto con il loro cellulare, che è essenzialmente una costruzione di pagine Javascript davvero carina e un elemento di fantasia che si nasconde come nel caso del tag video.

tl; dr Ecco una "soluzione alternativa" per provare a creare una funzione UX di "riproduzione automatica" sui dispositivi iOS senza andare al di là dei limiti di Apple e fare in modo che gli utenti decidano se vogliono guardare un video (o audio più simile, anche se io non hanno testato) se stessi senza averne uno appena caricato senza il loro permesso.

Inoltre, per la persona che ha commentato che è da sleep.fm, questa purtroppo non sarebbe stata ancora una soluzione ai tuoi problemi che è la riproduzione audio basata sul tempo.

Spero che qualcuno trovi utile questa informazione, mi avrebbe risparmiato una settimana di cattive notizie a un cliente che era fermamente convinto di avere questa funzione e alla fine sono stato felice di trovare un modo per fornirla.

MODIFICARE

Ulteriori risultati indicano che la soluzione alternativa di cui sopra è solo per dispositivi iPhone / iPod. L'iPad riproduce il video in Safari prima che sia stato a schermo intero, quindi avrai bisogno di un meccanismo per ridimensionare il video al clic prima della riproduzione, altrimenti ti ritroverai con audio e nessun video.

— Brandon Buck
fonte

2

Sarebbe meglio usare al $dummyVideo.get(0)posto delle parentesi, quindi jQuery può facilmente fallire se la tua selezione è vuota.

— Micros

12

Basta impostare

webView.mediaPlaybackRequiresUserAction = NO;

La riproduzione automatica funziona per me su iOS.

— Er Li
fonte

29

Questo non funziona per un sito Web, funziona solo per i siti in cui li hai inseriti in un'applicazione nativa.

— Brandon Buck

5

Voglio dire, da una pagina web (come la domanda sta ponendo) questo è qualcosa di completamente inaccessibile - sì, Javascript in un browser non può farlo. Funziona solo se esegui il tuo sito all'interno di una WebView da un'applicazione di cui hai il controllo, quindi non fornisce davvero una soluzione alla domanda.

— Brandon Buck

6

@izuriel per essere onesti, ha etichettato la domanda con "goal-c" e "cocoa-touch", quindi non è così inverosimile presumere che stia usando una visualizzazione web

— Kloar

3

I tag @Kloar vengono solitamente aggiunti come mezzo per ottenere maggiore attenzione o per un malinteso generale del problema che stanno cercando di risolvere. La persona che ha posto la domanda potrebbe aver pensato che menzionare l'obiettivo-c fosse come dire "iOS" (e simile per cocoa-touch). Il tag "uiwebview" non è elencato, quindi lo escluderei come opzione praticabile. La domanda menziona l'utilizzo di Safari su desktop e iPad (niente su un'app) e utilizza codici demo Javascript per eseguire il debug della situazione. Tutto sommato direi che è più una scommessa sicura che questa domanda era davvero alla ricerca di soluzioni web e non native.

— Brandon Buck

Su Android: developer.android.com/reference/android/webkit/…

— cottonBallPaws,

11

A partire da iOS 10, i video ora possono essere riprodotti automaticamente, ma solo di essi sono disattivati o non hanno traccia audio. Sìì!

In breve:

<video autoplay> gli elementi ora rispetteranno l'attributo autoplay, per gli elementi che soddisfano le seguenti condizioni:
- <video> gli elementi potranno essere riprodotti automaticamente senza un gesto dell'utente se il loro supporto di origine non contiene tracce audio.
- <video muted> gli elementi potranno anche essere riprodotti automaticamente senza un gesto dell'utente.
- Se un <video>elemento ottiene una traccia audio o viene riattivato senza un gesto dell'utente, la riproduzione verrà messa in pausa.
- <video autoplay> gli elementi inizieranno a essere riprodotti solo quando sono visibili sullo schermo, ad esempio quando vengono fatti scorrere nella visualizzazione, resi visibili tramite CSS e inseriti nel DOM.
- <video autoplay> gli elementi verranno messi in pausa se diventano non visibili, ad esempio quando vengono fatti scorrere fuori dalla visualizzazione.

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

— JackKalish
fonte

4

L'attributo autoplay funziona solo su PC, non su dispositivi mobili. Ho provato molte volte.

— huykon225

7

In questo riferimento HTML5 di Safari , puoi leggere

Per evitare download non richiesti su reti cellulari a spese dell'utente, i contenuti multimediali incorporati non possono essere riprodotti automaticamente in Safari su iOS: l'utente avvia sempre la riproduzione. Un controller viene fornito automaticamente su iPhone o iPod touch una volta avviata la riproduzione, ma per iPad è necessario impostare l'attributo dei controlli o fornire un controller utilizzando JavaScript.

— Giona
fonte

38

"a parte i file GIF che possono essere più MB e utilizzare la larghezza di banda senza che

— nessuno se ne accorga

@ Simon_Weaver x12 volte per la maggior parte delle volte per essere precisi.

— Burak Tokak

2

Lascia prima il video disattivato per garantire la riproduzione automatica in iOS, quindi riattivalo se lo desideri.

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>

— Mohammad Ali Akbari
fonte