Come si gioca a un file video mp4 con tag video HTML5 su iOS (iPhone e iPad)?

Question

Desidero visualizzare video HTML5 ai miei utenti utilizzando il tag video. Per Firefox, Chrome e Opera WEBM funziona come previsto. In Safari su Windows e Mac funziona anche la mia versione MP4. L'unico problema che sto vivendo è che non giocherà su iPad e iPhone (Safari ovviamente).

Crea il video

La MP4 (H.264 + acc-lc) viene convertito in questo modo (con profilo: linea di base e il livello di 3.0 per la massima compatibilità con iOS):

• flusso # 0: 0 (ita): Video: H264 (Constrained Baseline) (avc1/0x31637661), YUV420P, 640x352, 198 kb/s, 17 fps, 17 TBR, 17408 TBN, 34 da confermare (default)
• flusso # 0: 1 (eng): Audio: aac (LC) (mp4a/0x6134706D), 48000 Hz, stereo, fltp, 56 kb/s (default)

Edit: uscita ffprobe totale (lievi variazioni ecc bitrate a quanto sopra detto):

Metadata: 
major_brand  : isom 
minor_version : 512 
compatible_brands: isomiso2avc1mp41 
encoder   : Lavf56.30.100 
Duration: 00:01:00.05, start: 0.046440, bitrate: 289 kb/s 
Stream #0:0(eng): Video: h264 (Constrained Baseline) 
(avc1 /0x31637661), yuv420p, 640x352, 198 kb/s, 25 fps, 25 tbr, 
12800 tbn, 50 tbc (default) 
Metadata: 
    handler_name : VideoHandler 
Stream #0:1(eng): Audio: aac (LC) (mp4a/0x6134706D), 44100 Hz, 
stereo, fltp, 85 kb/s (default) 
Metadata: 
    handler_name : SoundHandler 

ho trovato vari requisiti per dispositivi iOS come this e this, anche someone menzionato per aggiungere il formato pixel yuv420p durante la conversione.

Infatti il ​​ffmpeg cmd assomiglia a questo:

ffmpeg -i __inputfile__ -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -b:v 200K -r 17 -bt 800K -c:a libfdk_aac -b:a 85k -ar 44100 -y __outputfile_lowversion__.mp4 

display video

Con Modernizr rilevo che formato è "supportato" e aggiungi al src o il tag video. L'ultima cosa è aggiungere il giusto tipo MIME. Per mp4 aggiungo type="video/mp4". Il codice completo per il tag video è:

<video class="p-video" preload="auto" autoplay="" type="video/mp4" src="http://full.url/to/video_low.mp4"/> 

Ho provato vari modi: con la propria implementazione propria interfaccia, comandi e roba da produttori di browser e Video.js solo per controllare se sono troppo studip per questo. Tutti funzionano negli ambienti sopra elencati tranne che per iPhone e iPad.

Ho letto questo articolo su Video on the web, in particolare e serve solo il file "giusto" con il tipo "giusto" senza un set di attributi poster.

mio Apache ha

AddType video/mp4      mp4 m4v f4v f4p 
AddType video/ogg      ogv 
AddType video/webm      webm 

E byte-range sono abilitati. Questo è necessario per ottenere contenuti parziali dal server.

Qualcuno ha idea di cosa sta succedendo lì? Grazie in anticipo!

Modifica: Safari e Chrome lanciano entrambi MEDIA_ERR_SRC_NOT_SUPPORTED Errore su iPad. Ci deve essere un problema con la codifica.

Answer 1

ho trovato il motivo per cui iPad e iPhone non lo riprodurrà. La mia cartella ha accesso limitato tramite htaccess per proteggere l'applicazione beta. Firefox e così via inoltrano il nome utente e la password a tutte le richieste, Safari su Mac chiede nuovamente le credenziali, ma i browser su iPad e iPhone no. Per controllare rapidamente questo ho rimosso la protezione della cartella e ha funzionato bene. Grazie per tutti i contributi e le riflessioni sul mio problema!

Answer 2

Provare a modificare l'attributo 'controls' o definire src in modo diverso.

<video src="http://example.com/path/mymovie.mov" 
     controls 
     height=340 width=640 
     poster="http://example.com/path/poster.jpg"> 
    </video> 

Check out this article 'About HTML5 Audio and Video for Safari' (developers guide)

Inoltre, una bella assistenza stabile al tag HTML5 <video> per iPad/iPhone è JW player. (funziona con esso)

jwplayer('video').setup({ 
    flashplayer: '/Scripts/jwplayer/player.swf', 
    file: 'seanpenn.mp4', 
    autostart: false, 
    controlbar: 'over', 
    image: 'spicoli.jpg', 
    width: 295, 
    height: 214, 
    skin: '/Scripts/jwplayer/glow.xml', 
    stretching: 'exactfit' 
});