Preparing Mp4 File for HTML 5

preparing mp4 file for html 5

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

html5 video safari downloads full before playing

looks like the MOOV atom isn't at the beginning of the file.
I used ffmpeg to just relocate that (no other encoding) and then a binary compare (using HexFiend) and a quick test seemed to show that Safari was playing the video sooner

./ffmpeg -i top.mp4 -codec copy -movflags faststart top-fs.mp4

(caveat being that even though I cleared browser cache I didn't do things like bounce my test server or time things too accurately)

FWIW I find ffmpeg to be a good solution, and especially for background video you'll want to play around with parameters to optimize for your use-case

HTML5 video_tag in rails development

Try with an .mp4 or .ogg or other supported format. .mov containers are not supported in most browsers.

You can usually test by trying to open the video in the browser directly.

I'd also suggest reviewing this answer for some hints on optimizing the video using ffmpeg

Set up buffering for video object

to process individual uploads you'll want to use something like ffmpeg to move the meta data (MOOV atom) to the front of the video file:

./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.

to do this in the background you'll want to review something like this to call ffmpeg from PHP, or to make use of http://ffmpeg-php.sourceforge.net/ to call it, or if easier use a remote transcode service such as http://ffmpegasaservice.com/

Confused about streaming video in HTML5

If you are delivering an mp4 then "instantly" may always have some delay - the client needs to download enough of the video to play without buffering (CloudFront etc will help as they'll cache closer to the user)

You will want to ensure that your mp4 file is optimized for best delivery... you'll need to play around with some of the settings but I would recommend making sure the MOOV element is at the start of the file to help the browser get enough metadata quickly.

I use ffmpeg to optimize content, usually something along these lines

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

you will want to play with the frame size (-s parameter) and the target bitrate (-b) to get the right balance of size and quality for the speed you need.

have a look at preparing mp4 file for html 5 for a slightly longer answer as well

Force .webm instead of .mp4

You can specify a priority of formats by the way you arrange the source tags for the video. If the browser supports the first format listed it will use that, if not it will continue to the next and so on.

Example:

This will try the webm format first, if browser cannot play it the theora version is tried and finally mp4 if that didn't work either (finally a fallback if none are supported) (borrowed from wikipedia) -

<video poster="movie.jpg" controls>
    <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
    <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
    <p>This is fallback content to display for user agents that do not
       support the video tag.</p>
</video>

Is OGG really necessary for HTML5 video full compatibility?

I'm sorry for you, but yes, for full compatibility .ogg is required. I tried to create a page in my website for sharing my videos just with h.264 and webM, But lots of smartphones can't play them.

There are many free ogg converters (one of them as an example) available if you need one.

---

Related Topics