HTML5 video: ffmpeg-encoded MP4 not playing in any browser (plays in VLC though)

Question

I am trying to serve HTML5 video in MP4 and WEBM fomats. I cannot get all browsers to work though:

• Browsers which support WEBM (Chrome desktop, Firefox desktop) play the videos fine.

• Browsers which use MP4 are not working (IE, Safari, Android).

• WEBM is being served as video/webm.

• MP4 is being served as video/mp4.

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

---

Browser errors:

• IE11: 11.0.9600.17126 / 11.0.9 KB2957689

  Error: Unsupported video type of invalid file path

• Android browser and Chrome Android:

  No error, video just refuses to start

---

Sanity test - the following three values are equal:

• Received file size: curl <video URL> | wc -c

• Actual file size: stat -c %s <video file>

• Server-specified file size: Content-Length HTTP header.

---

One of the videos in question is at:

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

  Content-Type: video/mp4

  Does not play in Chrome / IE11 / Chrome Android / Android Browser

  Does play in VLC

  FFMPEG encoding parameters:

  -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

  These were collected from deep searching on the best way to encode MP4 for mobile browsers. If I use -an -vcodec libx264 -s hd720 then that video also doesn't work in browsers.

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

  Content-Type: video/webm

  Plays in Chrome/Firefox

  FFMPEG encoding parameters:

  -an -vcodec libvpx -s hd720

---

The relevant HTML (classes, poster, etc removed):

<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 at http://jsfiddle.net/#&togetherjs=5Ql5MmrV4j

Answer 1

No MP4-playing browsers actually seem to have full support for MP4 - especially problematic for MS and Apple's browsers which are trying to create a royalty-hell / monopoly around the format.

I got it to work by re-encoding with the following FFMPEG parameters:

-pix_fmt yuv420p
-preset slow
-profile:v baseline

Giving a full command line of:

ffmpeg
  <INPUT DEFINITION>    # e.g. -i <FILE>
  -an    # if you won't want audio, otherwise -acodec libaac -b:a 128k
  -s hd720
  -vcodec libx264
  -b:v BITRATE    # e.g. 4M
  -vcodec libx264
  -pix_fmt yuv420p
  -preset slow
  -profile:v baseline
  -movflags faststart
  -y <OUTPUT PATH>

The problem was ultimately yet another example of proprietary software vendors not properly supporting their own standards.