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

cross-browser, google-chrome, html5-video, internet-explorer-11, mp4

Solution

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.

Problem

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

Original source