Il tag video HTML5 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 3 formato: .ogv usando fireFogg, .webm usando anche firefogg e .mp4 usando l'applicazione HandBrake lo script html Ho usato nella mia pagina:

<video  width="800" height="640" loop preload="false" autoplay  controls tabindex="0">
  <source src="xmasvideo/video.mp4" type="video/mp4" />
  <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
  <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>

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

Nota che la versione di Safari che ho supporta i video HTML5

Ho avuto lo stesso problema con dispositivi Apple come iPhone e iPad, ho disattivato la modalità di risparmio energetico e ha funzionato e dovresti anche includere l' playsinlineattributo nel tag video come questo:

<video class="video-background" autoplay loop muted playsinline>

Funzionava solo se incluso playsinline.

Un'altra possibile soluzione per i futuri ricercatori: (se il problema non è un problema di tipo MIME).

Per qualche motivo i video non vengono riprodotti su iPad a meno che non imposti il ​​flag dei controlli = "true".

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

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

E ora funziona sia su iPad che su iPhone:

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

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

Maggiori informazioni qui su mobiforge.com sulle richieste di byte-range, nell'Appendice A: Streaming per Apple iPhone :

Innanzitutto, il browser Web Safari richiede il contenuto e, se è un file audio o video, apre il suo lettore multimediale. Il lettore multimediale richiede quindi i primi 2 byte del contenuto, per assicurarsi 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 sul 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 fa un'altra richiesta. Poiché Safari contiene le informazioni sulla sessione, passerà l'autenticazione, ma QuickTime no.

Puoi vederlo se visualizzi il registro di accesso al server ... prima la richiesta da Safari, poi la richiesta da QuickTime. Gli altri browser effettuano solo 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 limitato nel tempo dalla richiesta originale. Aggiornerò questa risposta se trovo una soluzione più diretta.

Per le ricerche future e, ho avuto un file MP4 che ho ridimensionato con freno a mano utilizzando handbrake-gtkda apt-get, per esempio sudo apt-get install handbrake-gtk. In Ubuntu 14.04, il handbrakerepository non include il supporto per MP4 pronto all'uso. Ho lasciato le impostazioni predefinite, ho rimosso la traccia audio e si genera un file * .M4V. Per coloro che si chiedono, sono lo stesso contenitore ma M4V viene utilizzato principalmente su iOS per aprirsi in iTunes.

Funzionava in tutti i browser eccetto Safari:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Ho cambiato il tipo MIME tra video/mp4e video/m4vsenza alcun effetto. Ho anche provato ad aggiungere l' controlattributo e di nuovo, nessun effetto.

Ha funzionato in tutti i browser testati, inclusi Safari 7 su Mavericks e Safari 8 su Yosemite. Ho semplicemente rinominato lo stesso file m4v (il file effettivo, non solo l'HTML) in mp4 e l'ho ricaricato sul nostro CDN:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Safari penso che si stia aspettando un MP4 con il nome effettivo. Nessun'altra combinazione di file e tipo MIME ha funzionato per me. Penso che gli altri browser optino prima per il file WEBM, in particolare Chrome, anche se sono abbastanza sicuro che l'elenco delle fonti dovrebbe selezionare la prima fonte che è tecnicamente supportata.

Ciò non ha, tuttavia, risolto il problema del video nei dispositivi iOS (iPad 3 "il nuovo iPad" e iPhone 6 testati).

Basta aggiungere un mutedattributo 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à i seguenti criteri:

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

<video> Gli elementi ora rispetteranno il metodo play (), per gli elementi che soddisfano le seguenti condizioni:

• <video> gli elementi potranno riprodurre () senza un gesto dell'utente se il loro supporto sorgente non contiene tracce audio o se la loro proprietà disattivata è impostata su true.
• Se un <video>elemento ottiene una traccia audio o viene disattivato senza un gesto dell'utente, la riproduzione verrà messa in pausa.
• <video> gli elementi potranno essere riprodotti () quando non sono visibili sullo schermo o quando sono fuori dalla visualizzazione.
• video.play () restituirà una promessa, che verrà rifiutata se una di queste condizioni non viene soddisfatta.

Su iPhone, gli <video playsinline>elementi potranno ora essere riprodotti in linea e non entreranno automaticamente in modalità a schermo intero quando inizia la riproduzione. <video>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 <video>elementi senza playinline continueranno a essere riprodotti in linea.

Ho scoperto che, sebbene Safari supporti i video HTML5, è necessario installare Quicktime Player affinché funzioni. Su un sito che ho realizzato e che utilizza video HTML5, l'utente viene avvisato quando utilizza Safari, dicendo loro che deve avere installato Quicktime, altrimenti potrà solo vedere le trascrizioni dei video. Spero che questo ti aiuti.

Ho riscontrato strani problemi con certificati SSL di "sviluppo" non affidabili in cui Safari mobile servirà felicemente la tua pagina ma si rifiuta di pubblicare un video su un certificato SSL "falso" anche se hai accettato il certificato.

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

L'aggiunta di "playsinline" funziona per me su Iphone e Ipa se non ti dispiace che l'audio del tuo video sia disattivato.

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

Se non vuoi che il tuo video venga disattivato, ma desideri comunque la riproduzione automatica, prova a rimuovere l'attributo disattivato con js: Come riattivare l'audio del video html5 con un'elica disattivata

A partire da iOS 6.1, non è più possibile riprodurre automaticamente i video sull'iPad. Secondo la documentazione Apple, la funzione di riproduzione automatica non funziona su Safari in tutti i dispositivi iOS incluso iPad:

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

Puoi leggere di più in questa documentazione Apple

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

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

Quanto controls=”true”menzionato in un post sopra non ha senso per me poiché Apple dice che usa i controlli da solo.

Riferimento: "Per utilizzare audio o video HTML5, inizia creando un elemento o, specificando un URL di origine per il supporto e includendo l'attributo di controllo. <video src="http://example.com/path/mymovie.mp4" controls></video>"

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

Nei miei rapporti (una piccola digressione) : 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 in Safari. (mobile e desktop).

Quindi se (come me) stai riscontrando un problema .quicktime (o qualcosa di diverso da .mp4) in Safari , ecco una soluzione fornita da Apple. Nota, devo ancora provarlo da solo e non sono così soddisfatto a colpo d'occhio, sto solo fornendo maggiori informazioni.

Riferimento: "Torna al plug-in QuickTime Esiste un modo semplice per tornare al plug-in QuickTime che funziona per quasi tutti i browser: scarica il file JavaScript precostruito fornito da Apple, ac_quicktime.js, da HTML Video Example e includilo nella tua pagina web inserendo la seguente riga di codice nell'intestazione HTML: <script src="ac_quicktime.js" type="text/javascript"></script>"

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 rinominare .quicktime al .movcaricamento precedente al server (nel tipo di file base64 "data: video / mov;"), saltare ac_quicktime.js. . . funzionerà quindi nel tag video html; Hacker Hack.

Usando questo codice il video verrà riprodotto in tutti i browser in Safari anche con i dispositivi ios ... Provaci tutti (l'ho usato e funziona bene)

"

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
    	<source src="video/video.mp4" type="video/mp4"></source>
		<source src="video/video.webm" type="video/webm"></source>
		<source src="video/video.mov" type="video/mov"></source>
</video>

"

Ho avuto un problema simile in cui i video all'interno di un <video>tag venivano riprodotti solo su Chrome e Firefox ma non su Safari. Ecco cosa ho fatto per risolverlo ...

Uno strano trucco che ho trovato è stato quello di avere due diversi riferimenti al tuo video, uno in un <video>tag per Chrome e Firefox e l'altro in un <img>tag per Safari. Fatto divertente, i video vengono effettivamente riprodotti in un <img>tag su Safari. Successivamente, scrivi un semplice script per nascondere l'uno o l'altro quando un determinato browser è in uso. Quindi per esempio:

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

Questo aiuta anche a risolvere il problema di una sottile cornice / bordo nero su alcuni video su determinati browser in cui sono visualizzati in modo errato.

Ho avuto questo problema in cui la riproduzione .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 essere un problema di tipo MIME, ma non perché non fosse dichiarato come tipo MIME in IIS, piuttosto perché è stato dichiarato due volte (una volta in IIS e anche in un file web.config). L'ho scoperto provando a 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.

Per IOS, usa solo il file sorgente mp4. Ho riscontrato un problema nell'ultimo browser Safari che il browser Safari non è in grado di rilevare correttamente il file sorgente e per questo motivo la riproduzione automatica del video non funziona.

Controlliamo l'esempio sotto:

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

Poiché ho usato mp4, webm nei file sorgente. Safari non supporta webm ma ancora nell'ultima versione di Safari, seleziona webm e non riesce a riprodurre automaticamente il video.

Quindi, per lavorare con la riproduzione automatica su tutti i browser supportati, suggerirei di controllare prima il browser e in base a questo dovresti generare il tuo html.

Quindi per safari, usa sotto html.

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Per altro oltre al safari,

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Ho avuto lo stesso problema: assicurati che l'URL dell'asset video provenga da un dominio protetto. Il nostro ambiente di sviluppo è http mentre la produzione è sicura. A causa del video a cui si fa riferimento tramite il percorso relativo, non stava funzionando sullo sviluppo. Sembra essere un problema che Apple richiede che il video sia protetto ...

funziona ma MacOs ha recentemente una politica di riproduzione automatica per l'utente: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ , ho risolto lo stesso problema utilizzando un pulsante per abilitare il suono:

ejm:

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

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

Ciò che ha aiutato nel mio caso è stato il rilascio della traccia audio. Prima era silenzioso, ma doveva essere completamente sparito.

Su Ubuntu:

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

E safari / desktop iniziano a riprodurre il video

Per il mio caso d'uso c'erano due cose :

1. Non stavo usando la nuova politica dell'attributo / webkit playsinline ;
2. Il mio video / mime-type o whathathell non era codificato correttamente, quindi ho usato questo sito per convertirlo in tutti i formati di cui avevo bisogno: https://pt.converterpoint.com/

o /

Ho avuto esattamente lo stesso problema, il mio tag video HTML ha funzionato bene su Chrome e Mozilla, su Safari: i controlli apparivano ma il video era vuoto. Ho provato a giocare con tutti gli attributi di cui sopra, rimuovere / aggiungere silenziato, playsInline, ecc. E niente ha funzionato. Il problema era anche con i server come descritto qui. Ho avuto questo - NON FUNZIONA:

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

e ho appena spostato il mio video nella libreria esterna e ora sto bene su Safari, FUNZIONA bene:

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

Niente ha funzionato per me tranne che per la compressione del video sotto i 30 MB. Questo ha funzionato ma con una compressione pessima.

Se qualcuno aveva lo stesso problema, l'ho risolto abilitando il supporto Byte-Range sul mio server. Sembra che Safari richieda richieste di intervallo di byte. Nel mio caso uso NGINX e ho dovuto aggiungere proxy_force_ranges on;al mio file di configurazione. Grazie a questa risposta !