Jak odtwarzać plik wideo MP4 z tagiem wideo HTML5 na iOS (iPhone i iPad)?

Question

Chcę wyświetlać wideo HTML5 moim użytkownikom za pomocą tagu wideo. W przeglądarkach Firefox, Chrome i Opera WEBM działa zgodnie z oczekiwaniami. W Safari na Windowsie i Macu działa też moja wersja MP4. Jedyny problem, którego doświadczam, to to, że nie będzie grać na iPadzie i iPhonie (oczywiście Safari).

tworzenia wideo

MP4 (H.264 + ACC-lc) przeprowadza się w ten sposób (z profilu: bazowej i poziom 3,0 dla maksymalnej kompatybilności z OI):

• strumień # 0: 0 (pl): Film: H264 (Ograniczone bazowa) (avc1/0x31637661) yuv420p, 640x352 198 kb/s, 17 klatek na sekundę, 17 TBR 17408 TBN, 34 TBC (domyślnie)
• strumień # 0: 1 (pol): Audio: aac (LC) (mp4a/0x6134706D), 48000 Hz, stereo, fltp, 56 kb/s (ustawienie domyślne)

Edit: Pełna moc ffprobe (niewielkie zmiany bitrate itp do wyżej wymienionych):

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 

znalazłem różne wymagania dla urządzeń z iOS jak this i this, również someone wspomniano, aby podczas konwertowania dodać format piksela yuv420p.

W rzeczywistości ffmpeg cmd wygląda następująco:

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 

wyświetlania wideo

Z modernizr wykryć, który format jest "obsługiwany" i dodać go do src lub etykietce video. Ostatnią rzeczą jest dodanie właściwego typu MIME. Dla mp4 dodaję type="video/mp4". Pełny kod dla tagu video jest:

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

Próbowałem różnych sposobów: własny realizację z własnym interfejsem, kontroli i rzeczy od producentów przeglądarek i video.js tylko, aby sprawdzić, czy jestem zbyt studip do tego. Wszystkie działają w wyżej wymienionych środowiskach, z wyjątkiem iPhone'a i iPada.

Przeczytałem ten artykuł na temat Video on the web, szczególnie this part i wyświetlałem tylko "właściwy" plik z "właściwym" typem bez zestawu atrybutów poster.

My Apache ma

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

i bajtu zakresy są włączone. Jest to potrzebne, aby uzyskać częściową zawartość z serwera.

Czy ktoś ma pojęcia, co się tam dzieje? Z góry dziękuję!

Edytuj: Safari i Chrome rzutują na iPada błąd MEDIA_ERR_SRC_NOT_SUPPORTED. Musi wystąpić problem z kodowaniem.

Answer 1

znalazłem powód, dlaczego iPad a iPhone go nie odtwarza. Mój folder ma ograniczony dostęp przez htaccess w celu ochrony aplikacji beta. Firefox i tak dalej przesyła nazwę użytkownika i hasło do wszystkich żądań, Safari na komputerze Mac ponownie prosi o poświadczenia, ale przeglądarki na iPadzie i iPhonie nie będą tego robić. Aby szybko sprawdzić to, usunąłem zabezpieczenie folderu i zadziałało dobrze. Dziękuję za wszystkie uwagi i przemyślenia na temat mojego problemu!

Answer 2

Spróbuj zmienić atrybut "controls" lub zdefiniuj inaczej src.

<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)

Również miłym stabilne wsparcie dla HTML5 <video> tagu dla iPad/iPhone jest JW player. (współpracuje z nim)

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' 
});