Il tag HTML5 Video non funziona in Safari, iPhone e iPad

Sto cercando di creare una pagina web html5 in cui ci sia un piccolo video come 13s, ho convertito la versione flash di questo video in formato 3: .ogv usando fireFogg, .webm usando anche firefogg e .mp4 usando l’applicazione HandBrake lo script html Ho usato nella mia pagina:

 

Il video funziona bene in Chrome e FireFox ma non funziona affatto né in Safari sul desktop né su iPhone o iPad, l’output è semplicemente una pagina vuota che mostra i controlli del tag video ma non viene caricato nulla

Si noti che la versione di Safari che ho supporta il video HTML5

Un’altra ansible soluzione per voi futuri utenti: (Se il vostro problema non è un problema di mimetype.)

Per qualche motivo i video non verrebbero riprodotti su iPad a meno che non avessi impostato il flag = “true”.

Esempio: questo ha funzionato per me su iPhone ma non su iPad.

  

E ora funziona su iPad e iPhone:

  

Il tuo server web potrebbe non supportare le richieste dell’intervallo di byte HTTP. Questo è il caso del server Web che sto utilizzando e il risultato è che il widget del video viene caricato e viene visualizzato un pulsante di riproduzione, ma il clic sul pulsante non ha alcun effetto. – Il video funziona in FF e Chrome, ma non in iPhone o iPad.

Leggi di più qui su mobiforge.com sulle richieste di range di byte, nell’Appendice A: Streaming per Apple iPhone :

Per prima cosa, il browser Web Safari richiede il contenuto e, se si tratta di un file audio o video che apre, è il lettore multimediale. Il lettore multimediale richiede quindi i primi 2 byte del contenuto, per garantire che il server Web supporti le richieste di intervallo di byte. Quindi, se li supporta, il lettore multimediale dell’iPhone richiede il resto del contenuto per intervalli di byte e lo riproduce.

Potresti voler cercare nel web “iphone mp4 byte-range”.

Se i tuoi video sono protetti da un sistema di accesso basato sulla sessione, Safari non riuscirà a caricarli. Questo perché Safari fa una richiesta iniziale per il video, quindi passa l’attività a QuickTime, che effettua un’altra richiesta. Dato che Safari conserva le informazioni sulla sessione, passerà l’autenticazione, ma QuickTime no.

Puoi vedere questo se vedi il tuo log di accesso al server … prima la richiesta da Safari, poi la richiesta da QuickTime. Altri browser effettuano una singola richiesta dal browser stesso.

Se questo è il tuo problema, potresti dover rielaborare l’accesso al video per utilizzare token temporanei o un accesso a tempo limitato dalla richiesta originale. Aggiornerò questa risposta se trovo una soluzione più diretta.

Anche per le ricerche future ho avuto un file mp4 che ho eseguito il downscaling con Handbrake usando handbrake-gtk da apt-get , ad esempio sudo apt-get install handbrake-gtk . In Ubuntu 14.04, il repository del handbrake non include il supporto per MP4 out of the box. Ho lasciato le impostazioni predefinite, rimosso la traccia audio e generato un file * .M4V. Per coloro che si chiedono, sono lo stesso contenitore ma M4V viene principalmente utilizzato su iOS per l’apertura in iTunes.

Questo ha funzionato in tutti i browser eccetto Safari:

  

Ho cambiato il tipo mime tra video/mp4 e video/m4v senza alcun effetto. Ho anche provato ad aggiungere l’attributo di control e ancora, nessun effetto.

Questo ha funzionato su tutti i browser testati inclusi Safari 7 su Mavericks e Safari 8 su Yosemite. Ho semplicemente ribattezzato lo stesso file m4v (il file vero e proprio, non solo l’HTML) in mp4 e ricaricato sul nostro CDN:

  

Safari penso che si aspetti completamente un MP4 effettivamente chiamato. Nessun’altra combinazione di file e tipo mime ha funzionato per me. Penso che gli altri browser scelgano per primi il file WEBM, in particolare Chrome, anche se sono abbastanza sicuro che l’elenco delle fonti dovrebbe selezionare la prima fonte supportata tecnicamente.

Tuttavia, ciò non ha risolto il problema del video nei dispositivi iOS (iPad 3 “il nuovo iPad” e iPhone 6 testati).

Ho scoperto che sebbene Safari supporti i video HTML5, è necessario installare Quicktime Player affinché funzioni. Su un sito che ho creato che utilizza HTML5 Video, l’utente viene avvisato quando usa Safari, dicendo loro che devono aver installato Quicktime, altrimenti potranno vedere solo le trascrizioni dei video. Spero che questo ti aiuti.

Ho riscontrato problemi strani con certificati SSL di “sviluppo” non attendibili in cui Safari mobile sarà lieto di pubblicare la tua pagina ma rifiuta di pubblicare un video su un certificato SSL “falso” anche se hai accettato il certificato.

Per testare puoi distribuire il video altrove o passare a http (per l’intera pagina) e dovrebbe essere riprodotto.

A partire da iOS 6.1, non è più ansible riprodurre automaticamente i video su iPad. Secondo la documentazione Apple, la funzione Autoplay non funziona su Safari su tutti i dispositivi ios, incluso iPad:

“Apple ha preso la decisione di disabilitare la riproduzione automatica dei video su dispositivi iOS, attraverso l’implementazione di script e attributi.

In Safari, su iOS (per tutti i dispositivi, incluso iPad), in cui l’utente può trovarsi su una rete cellulare e essere ricaricato per unità di dati, il precaricamento e la riproduzione automatica sono disabilitati. Nessun dato viene caricato fino all’avvio dell’utente.

Puoi leggere di più su questa documentazione di Apple

Basta aggiungere un attributo muted e tutto funzionerà correttamente.

La fonte di questa risposta è qui: https://webkit.org/blog/6784/new-video-policies-for-ios/

Per impostazione predefinita, WebKit avrà le seguenti politiche:

ora rispettano l’attributo autoplay, per gli elementi che soddisfano le seguenti condizioni:

  • elementi saranno autorizzati a automaticamente senza un gesto dell’utente se il loro supporto di origine non contiene tracce audio.
  • saranno inoltre autorizzati a riprodurre automaticamente senza un gesto dell’utente.
  • Se un elemento acquisisce una traccia audio o diventa non distriggersto senza un gesto dell’utente, la riproduzione si interromperà.
  • inizieranno a essere visualizzati solo quando sono visibili sullo schermo, ad esempio quando vengono fatti scorrere nella vista, resi visibili tramite CSS e inseriti nel DOM.
  • verranno messi in pausa se diventano non visibili, ad esempio quando si scorre fuori dalla finestra.

elementi ora rispettano il metodo play (), per gli elementi che soddisfano le seguenti condizioni:

  • elementi saranno autorizzati a giocare () senza un gesto dell’utente se il loro supporto sorgente non contiene tracce audio o se la loro proprietà distriggersta è impostata su true.
  • Se un elemento acquisisce una traccia audio o diventa non distriggersto senza un gesto dell’utente, la riproduzione si interromperà.
  • elementi saranno autorizzati a giocare () quando non sono visibili sullo schermo o fuori dalla finestra.
  • video.play () restituirà una promise, che sarà respinta se una di queste condizioni non viene soddisfatta.

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

Per un .mp4 funziona (safari mobile e desktop):

  

I controls=”true” citati in un post sopra non hanno alcun senso per me, dato che Apple dice che usa i controlli da solo.

Riferimento: “Per utilizzare audio o video HTML5, iniziare creando un elemento o, specificando un URL di origine per il supporto e includendo l’attributo controls.

Fonte: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

Nei miei rapporti (una piccola parentesi) : ho scoperto che il caricamento di video da iPhone lo invia al server come .quicktime. Ironia della sorte, questo è il problema quando si tenta di riprodurre il video dal server su Safari. (mobile e desktop).

Quindi, se (come me) stai vivendo un problema .quicktime (o qualsiasi cosa diversa da .mp4) in safari , ecco un lavoro fornito da Apple. Nota, devo ancora provarlo da solo e non ne sono affatto felice a colpo d’occhio, fornendo solo più informazioni.

Riferimento: “Ripristina il plug-in QuickTime Esiste un modo semplice per ripristinare il plug-in QuickTime che funziona per quasi tutti i browser: scaricare il file JavaScript predefinito fornito da Apple, ac_quicktime.js, dall’esempio del video HTML e nella tua pagina web inserendo la seguente riga di codice nella tua testata HTML:

Fonte: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

Aggiornamento: per .quicktime rinominare .mov prima del caricamento sul server (in base64 filetype “data: video / mov;”), saltare ac_quicktime.js. . . funzionerà quindi con tag video html; Hacker Hack.

Ho affrontato lo stesso problema. Perché la dimensione del mio frame video era troppo grande. ie.2248 px supporto Apple H.264 Baseline Profile Level 3.0 video, fino a 640 x 480 a 30 fps. Si noti che i frame B non sono supportati nel profilo Baseline. controlla questo per maggiori informazioni

Ho avuto questo problema in cui la riproduzione di .mp4 in Safari non funzionava, ma in altri browser andava bene. L’errore che stavo vedendo nella console era: errore media src non supportato. Nel mio caso questo si è rivelato un problema di tipo MIME, ma non perché non è stato dichiarato come tipo MIME in IIS, piuttosto che è stato dichiarato due volte (una volta in IIS e anche in un file web.config). Ho trovato questo cercando di scaricare il file .mp4 localmente sul server. Ho rimosso il file di configurazione dalla posizione del contenuto che stavo cercando di riprodurre e ha risolto il problema. Avrei potuto semplicemente eliminare il tipo MIME dal file web.config, ma in questo caso il file web.config non era necessario.

Ciò che mi ha aiutato nel mio caso è stata l’eliminazione della traccia audio. Prima era silenzioso, ma doveva sparire completamente.

Su ubuntu:

 ffmpeg -i input.mp4 -vcodec copy -an output.mp4 

E Safari / desktop iniziano a riprodurre il video

Ho avuto lo stesso problema con i dispositivi Apple come iPhone e iPad, ho distriggersto la modalità di risparmio energetico e ha funzionato e dovresti includere anche l’attributo playinline nel tag video come questo