Ich versuche HTML5-Videos in MP4- und WEBM-Formaten bereitzustellen. Ich kann jedoch nicht alle Browser zum Laufen bringen:

Browser, die WEBM unterstützen (Chrome Desktop, Firefox Desktop), spielen die Videos einwandfrei ab.

Browser, die MP4 verwenden, funktionieren nicht (IE, Safari, Android).

WEBM wird bedient alsvideo/webm.

MP4 wird bedient alsvideo/mp4.

Minimal JSFiddle bei:http://jsfiddle.net/#&togetherjs=5Ql5MmrV4j

Browserfehler:

IE11: 11.0.9600.17126 / 11.0.9 KB2957689

Error: Unsupported video type of invalid file path

Android-Browser und Chrome Android:

Kein Fehler, das Video lässt sich einfach nicht starten

Sanity Test - Die folgenden drei Werte sind gleich:

Größe der empfangenen Datei:curl <video URL> | wc -c

Tatsächliche Dateigröße:stat -c %s <video file>

Vom Server angegebene Dateigröße:Content-Length HTTP-Header.

Eines der fraglichen Videos ist bei:

MP4: http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.mp4

Content-Type: video/mp4

Spielt nicht in Chrome / IE11 / Chrome Android / Android Browser

Spielt in VLC

FFMPEG-Codierungsparameter:

-an -vcodec libx264 -s hd720 -flags +loop+mv4 -cmp 256 -partitions +parti4x4+parti8x8+partp4x4+partp8x8 -subq 6 -trellis 0 -refs 5 -bf 0 -coder 0 -me_range 16 -g 250 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -qmin 10 -qmax 51 -qdiff 4 -movflags faststart

Diese wurden aus der Tiefensuche gesammelt, um MP4 für mobile Browser am besten zu codieren. Wenn ich benutze-an -vcodec libx264 -s hd720 dann funktioniert dieses Video auch nicht in Browsern.

WEBM: http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.webm

Content-Type: video/webm

Spielt in Chrome / Firefox

FFMPEG-Codierungsparameter:

-an -vcodec libvpx -s hd720

Das relevante HTML (Klassen, Poster, etc. entfernt):

<video preload="metadata" controls="controls">
  <source type="video/mp4" src="http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.mp4">
  <source type="video/webm" src="http://hackology.co.uk/wp-content/uploads/2014/06/hd720-24.webm">
</video>

JSFiddle beihttp://jsfiddle.net/#&togetherjs=5Ql5MmrV4j