May 28, 2013

20 HTML5 Video Websites Examples and Resources

20 HTML5 Video Websites Examples and Resources

These days embedding video in a website is very easy, the <video> element in HTML5 is compatible with almost all current browser versions (see Can I Use video), which saves us a lot of the old difficulties.

Now we can implement video and customize a player without third-party software. <video> element is very simple: the complication is in the browser support, especially in old versions and mobile.

<video src="your-video.mov" width="300" height="150"></video>

One of the innovations that brought the HTML5 specification for videos was the ability to compensate for the lack of browser codecs offering different sources file with the src attribute so the browser can choose the first one that is capable of playing.

<video id="the-video" preload="" controls="controls" width="640" height="360">
<source src="your-movie_H264.mov">
<source src="your-movie_Ogg.ogv">
<source src="your-movie_WebM.webm">
</video>

Resources

In order to see the video in all browsers, we need to have these three video formats .mov, .ogv y .webm. Below you will find two HTML video converters which you can make use of.

Easy HTML5 Video Converter Miro Video Converter Converter