flash - preparing mp4 file for html 5

Question

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

<video width="640" height="480" controls>
    <source src="somefile.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

The video runs fine the the browser in my development machine, but the file is 500MB because it was recorded in full HD. How do I down-sample the file so that it is about 50MB, with smaller video but the same sound quality, and still able to play in the browser using the html5 video tag shown above?

I am using Windows. I have been using FlashIntegro, but it converts the files to avi format, which cannot be viewed using the video tags in html 5. I want an mp4 format I can publish using the video tags in html 5. I would like to use free software.

I do not want to use flash or adobe creative cloud, but I am adding those tags to find viewers who might know about free alternatives.

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