preparing mp4 file for html 5

Question

In html 5, I want to embed an mp4 like this:

Answer 1

I would suggest something like ffmpeg, though would set expectations on quality if you go from a 500mb file to a 50mb one - though a lot will depend on the amount of optimization already present in the source... I was able to get a 270Mb file down to 29Mb without visible loss of quality using the following:

./ffmpeg -y -i SourceFile.mp4 -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart DestFile.mp4

The above will give you a 1280x720 output, at 3Mbps using h264 in an mp4 container, and will also do a second pass to move the moov element to the front of the file enabling it to start streaming faster. It will not re-encode the audio so will keep whatever quality you started with

You may want to play around with the framesize and the bitrate to get the filesize to match what you like/need