Wie man mp4 Videodatei mit HTML5 Video Tag auf iOS (iPhone und iPad) spielt?

Question

Ich möchte HTML5-Video für meine Benutzer mit dem Video-Tag anzeigen. Für Firefox, Chrome und Opera funktioniert WEBM wie erwartet. In Safari unter Windows und Mac funktioniert auch meine MP4-Version. Das einzige Problem, das ich habe, ist, dass es nicht auf iPad und iPhone (Safari natürlich) spielen wird.

Erstellen von Video-

Der MP4 (H.264 + acc-lc) wird wie folgt aus (mit Profil: Baseline und Level 3.0 für maximale Kompatibilität mit iOS): konvertiert

• Strom # 0: 0 (eng): Video: H264 (Constrained Baseline) (AVC1/0x31637661), yuv420p, 640x352, 198 kb/s, 17 fps, 17 TBR, 17408 TBN, 34 TBC (default)
• Strom # 0: 1 (ger): Audio: aac (LC) (mp4a/0x6134706D), 48000 Hz, stereo, ftp, 56 kb/s (Standard)

Edit: Whole ffprobe Ausgang (geringfügige Änderungen in Bitrate usw. zu dem oben genannten):

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 

ich verschiedene Anforderungen für iOS-Geräte wie this und this gefunden, auch someone erwähnt, um das yuv420p-Pixelformat bei der Konvertierung hinzuzufügen.

In der Tat das ffmpeg cmd sieht wie folgt aus:

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 

Anzeige Video

Mit Modernizr ich erkennen, welches Format "unterstützt" wird, und fügen Sie es dem src oder video-Tag. Die letzte Sache ist das Hinzufügen des richtigen MIME-Typs. Für mp4 füge ich type="video/mp4" hinzu. Der vollständige Code für den video-Tag ist:

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

ich verschiedene Weise versucht: ein eigene Implementierung mit eigener Schnittstelle, Kontrollen und Sachen von Browser-Herstellern und Video.js nur zu prüfen, ob ich für diese bin auch Studip. Alle arbeiten in den oben aufgeführten Umgebungen außer iPhone und iPad.

las ich diesen Artikel auf Video on the web, insbesondere this part und nur mit der „richtigen“ Art ohne poster Attribut gesetzt, die „richtige“ Datei dienen.

Mein Apache hat

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

und Byte-Bereiche aktiviert sind. Dies ist erforderlich, um partiellen Inhalt vom Server zu erhalten.

Hat jemand eine Ahnung, was dort los ist? Danke im Voraus!

Bearbeiten: Safari und Chrome beide werfen MEDIA_ERR_SRC_NOT_SUPPORTED Fehler auf dem iPad. Es muss ein Problem mit der Codierung geben.

Answer 1

ich den Grund gefunden, warum iPad und das iPhone wird es nicht abspielen. Mein Ordner verfügt über einen eingeschränkten Zugriff über htaccess, um die Beta-Anwendung zu schützen. Firefox und so weiter den Benutzernamen und das Passwort für alle Anfragen, Safari auf dem Mac fragt erneut nach den Anmeldeinformationen, aber Browser auf dem iPad und iPhone nicht. Um dies schnell zu überprüfen habe ich den Ordner Schutz entfernt und es hat gut funktioniert. Danke für alle Beiträge und Gedanken zu meinem Thema!

Answer 2

Versuchen Sie, das Attribut 'controls' umzuschalten - oder definieren Sie src anders.

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

Auch eine schöne stabile Unterstützung des HTML5 <video> Tag für iPad/iPhone ist JW player. (mit ihm funktioniert)

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