Converting html5 video - what software to use - html

Question

we're planning to use a fullscreen html5 video on a website. I've read that MPEG-4/H.264 might be the best format at the moment.
I have the video file available as 1080p mp4 … it's 41.2mb in size. Since the video should play in "relative" good quality and stream really fast, how can i optimize the video file.
Any tips, tricks for me? is 1080p needed for a fullscreen video on desktop or is 720p enough?
What should the output size of a fullscreen video for desktop be?
Regards,
matt

Answer 1

a lot will depend on the intended audience and their connectivity. If they've got good connections and a big monitor they may be able to appreciate 1080p, but 720p is probably going to be okay.
It's better to err on the side of reducing quality vs risking buffering IMO (though that will depend on the use-case obviously). My usual approach would be to work with some target users and A:B test some different quality settings (adjusting both framesize and bitrate, clearing their cache each time) to see where the sweet spot is...
Make sure the MOOV atom is at the start so they don't have to wait for the whole thing to load before it starts to play.
You can create some sample versions of your content fairly quickly using ffmpeg to transcode/transmux with various settings
ffmpeg -y -i {source-file} -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart {target-file}
-s defines the target output size
-b defines the target bitrate
movflags faststart will run a second pass to ensure the moov atom is where you want it
Also, depending on your mobile target you may be better off with a fragmented MPEG format that allows for adaptive bitrates (eg HLS) so the browser can decide which bitrate/framesize it can best display for the request

Answer 2

I've been spending a lot of time with HTML5 video lately and just came across this thread-- Miro is a nice, simple (and free) option that can output in the major formats, i.e. mp4, webm & ogg theora.

Answer 3

720p would be enough, especially if you can add a semi-transparent film over the top to hide any artifacts. You really don't want it to be slow and jerky.
Format wise you can use as many as you like in the <video> tag (for whatever browsers you need to support). E.g.
<video poster="path/to/screenshot.jpg">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogg" type="video/ogg">
<source src="path/to/video.mp4" type="video/mp4">
</video>
You can even add a flash fallback. Anything inside the video tag other than <source> attributes is ignored by browsers that support html5 video. Therefore:
<video poster="path/to/screenshot.jpg">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogg" type="video/ogg">
<source src="path/to/video.mp4" type="video/mp4">
<!-- Flash fallback -->
<object data="flvplayer.swf" type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie"/>
</object>
</video>
I work with HTML5 video a fair bit and built a free (for under 20MB files) converter that takes any video file and outputs webm, ogg and mp4 files along with your <video> tag: http://html5backgroundvideos.com/converter/