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.

Reseau

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 fast start 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 frame size and the bitrate to get the filesize to match what you like/need

Navaho

Thank you. I did download ffmpeg onto my windows 7 machine, but it is not in any way clear how to get it to give me a command line that I can use. In order to use your advice, I would need to know how to set up all the steps on a windows 7 machine leading up to the point where I type the line you suggested above. – Reseau

The reason I would need you to give more contextual instructions is that, when I open the unzipped contents of the zip file that downloads ffmpeg, I click on the only logical file and it gives me a prompt that does not state the directory, even when I type cd ... Also, I don't know if I should type the fully qualified path of the sourcefile.mp4. – Reseau

if you have an ffmpeg.exe in your directory then remove the "./" from the front (or replace it with a path to ffmpeg). If the mp4 source is in a different directory then yes, use the FQN to get to it – Navaho

did that help? let me know if you're still stuck – Navaho

That works. Thank you. I only have a few minutes a day to work on this, and I was waiting until I could test it. 1280x720 is too big, but I imagine it will work just as well when I try 640x360 later. I imagine that dividing width and height by 2 will result in the video always filling the video box in html with the right aspect ratio. – Reseau

excellent! yes, as long as you keep the aspect ratio the same (w:h) things will look okay - you can balance framesize and bitrate to get best (visual) quality and file size for your use – Navaho

@Reseau glad you like FFMpeg but you can also try MediaCoder for a visual interface and conversions can be powered by FFMpeg anyways. – Hutment

@Navaho I just posted another question with a link to a file sharing site. The video does not load properly in internet explorer or android, but it does load fine in firefox. Are you willing to help with with the other question? Here is the link: #27882471 – Reseau