Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best video format for HTML5?

I've got a set of videos that are going to be posted on a new site I'm developing, using our new html5 player. I know Firefox only supports .ogg format, whereas most others (including eventually IE9) support h264.

I'm looking to tap into the experience of the crowd here: has anyone had any luck with a single video format across browsers? Or am I doomed to double-encode everything? It just seems a shame to waste space on having two copies of each video because we can't standardize our codecs.

Thanks in advance!

PS (Flash player isn't really an option as a fallback, partly on principle and partly because of a rather large mobile userbase.)

like image 572
CodeMoose Avatar asked Nov 29 '10 23:11

CodeMoose


People also ask

Is MP4 an HTML5?

There are 3 important video types which are supported by HTML5: MP4, WebM, and Ogg/Ogv. The MPEG-4 file type is generally encoded in H. 264 which allows for playback in third party Flash players.

What format of video is best for website?

MPEG-4 (mp4, m4v) MP4 videos are incredibly flexible as they allow a lot of codecs - this format is optimal for good image quality and small file size. Therefore, MP4 is also perfect for website use. The most broadly used codec is H. 264, but other codecs (DivX and Xvid) also get chosen in some cases.

Which video format is allowed by HTML?

There are three supported video formats in HTML: MP4, WebM, and OGG.

What is HTML5 file format?

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard.


2 Answers

From my personal experience with HTML5 Video, I create mp4, ogg, and flv file formats, and use the following implementation:

<video id="movie" width="" height="" preload controls>    <source id="srcMp4" src="video.mp4" />    <source id="srcOgg" src="video.ogg" />    <object id="flowplayer" name="flowplayer" width="480" height="352" data="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf"              type="application/x-shockwave-flash">       <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf" />       <param name="allowfullscreen" value="true" />       <param name="flashvars"      value='config={"clip":"http://domain.com/video.flv"}' />    </object> </video> 

The MP4 format is provided first, due to a previous bug in iPad which only sees the first source listed.

If the browser can't play the MP4 version, it tries to load the Ogg version. If that fails, it uses Flowplayer (flash) as a fallback.

I know you're looking for a solution without flash as a fallback, but in my opinion, we're just not there yet. People are still using IE6 for crying out loud!

HTML5 Video is still in the making, and until it's completely stable across all browsers and platforms, you'll need to provide a "workaround" for different scenarios.

For mobile, perhaps you can detect the User-Agent and go from there...

Hope this helps

like image 85
OV Web Solutions Avatar answered Sep 20 '22 08:09

OV Web Solutions


Probably WebM if not Ogg. WebM's patents are owned by Google but have been released from that. Ogg is probably OK but there are concerns. H.264 is a patent trap waiting to happen.

like image 32
Rob Avatar answered Sep 22 '22 08:09

Rob