Preparing mp4 file for html 5

Question

In html 5, I want to embed mp4 as follows:

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

The video works fine with the browser on my development machine, but the file is 500 MB because it was recorded in full HD. How can I hide the image of the file so that it is about 50 MB, with a smaller video, but with the same sound quality, and can still be played in the browser using the html5 tag shown above?

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

I don’t want to use flash or adobe creative cloud, but I add these tags to find viewers who may know about free alternatives.

Answer 1

I would suggest something like ffmpeg , although I would set quality expectations if you go from a 500-megabyte file to a 50-meter file, although a lot will depend on the amount of optimization already present in the source ... I was able to get 270 MB file up to 29 MB 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 an output of 1280x720 at a speed of 3 Mbps using h264 in the mp4 container, and also make a second pass to move the moov element to the beginning of the file, which allows it to start streaming faster. It will not transcode audio, so it will retain the quality that you started with

You might want to play around with freesis and bitrate to get a file size that matches what you like / need.