it-swarm.com.de

Wie kann ich eine mp4-Videodatei mit HTML5-Video-Tag auf iOS (iPhone und iPad) abspielen?

Ich möchte meinen Benutzern HTML5-Videos mithilfe des Video-Tags 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 abgespielt werden kann (Safari natürlich).

Video erstellen

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

  • Stream Nr. 0: 0: Video: h264 (eingeschränkte Basislinie) (avc1/0x31637661), yuv420p, 640 x 352, 198 kb/s, 17 fps, 17 tbr, 17408 tbn, 34 tbc (Standardeinstellung) )
  • Stream Nr. 0: 1 (ger): Audio: aac (LC) (mp4a/0x6134706D), 48000 Hz, Stereo, fltp, 56 kb/s (Standard)

Edit: Gesamte ffprobe-Ausgabe (leichte Änderungen in der Bitrate etc. zu den 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 fand verschiedene Anforderungen für iOS-Geräte wie das und das , auch jemand erwähnt, um das yuv420p-Pixelformat beim Konvertieren hinzuzufügen.

Tatsächlich sieht das ffmpeg cmd so 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

Video anzeigen

Mit Modernizr erkenne ich, welches Format "unterstützt" wird und füge es dem Tag src oder video hinzu. Als letztes muss der richtige MIME-Typ hinzugefügt werden. Für mp4 füge ich type="video/mp4" hinzu. Der vollständige Code für das Tag video lautet:

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

Ich habe verschiedene Möglichkeiten ausprobiert: Eigene Implementierung mit eigenem Interface, Steuerelementen und Sachen von Browser-Anbietern und video.js, nur um zu überprüfen, ob ich zu studip dafür bin. Alle arbeiten in den oben aufgeführten Umgebungen mit Ausnahme von iPhone und iPad.

Ich habe diesen Artikel über Video im Internet , insbesondere diesen Teil gelesen und liefere nur die "richtige" Datei mit dem "richtigen" Typ ohne posterattribute.

Mein Apache hat

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

Und Byte-Bereiche sind aktiviert. Dies ist erforderlich, um Teilinhalte vom Server abzurufen.

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

Edit: Safari und Chrome werfen beide einen MEDIA_ERR_SRC_NOT_SUPPORTED Fehler auf dem iPad. Es muss ein Problem mit der Codierung vorliegen.

6
Marc Saleiko

Ich habe den Grund gefunden, warum iPad und iPhone es nicht abspielen. Mein Ordner hat Zugriff über htaccess , um die Beta-Anwendung zu schützen. Firefox und so weiter leiten den Benutzernamen und das Kennwort an alle Anfragen weiter, die Safari auf dem Mac fragt erneut nach den Anmeldeinformationen, die Browser auf dem iPad und dem iPhone jedoch nicht. Um dies schnell zu überprüfen habe ich den Ordnerschutz entfernt und es hat gut funktioniert . Vielen Dank für alle Beiträge und Gedanken zu meiner Ausgabe!

2
Marc Saleiko

Versuchen Sie, das 'controls'-Attribut 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>

Schauen Sie sich diesen Artikel an (Über HTML5-Audio und -Videos für Safari) (Entwicklerhandbuch)

Eine nette stabile Unterstützung für das HTML5 <video>-Tag für iPad/iPhone ist JW-Player. (arbeitet damit)

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