Embed Video on Webpage Using HTML5

HTML5, obviously, is right now leading the trend in Web designing. Today, more than 75% of developers are already using HTML5, according to recent surveys. One of the most remarkable features of HTML5 is the efficacy of presenting videos using HTML5 instead of Flash: by HTML5 syntax, developers can easily embed video to a webpage without using Adobe Flash Player and any plugins.

How to embed video on a webpage using HTML5 syntax? It's very simple:
<video id="samplevideo" src="html5sample.mp4" controls></video>

That's the way it is! That's all you need to embed HTML5 video to a webpage without any third-party add-ons or embedded code from other sites — just a simple <video> tag.

Is it really that simple? Well, no! Actually, the complexity of using HTML5 to embed video arises not from the syntax, but from browser support and video encoding. Although most popular modern browsers now support the <video> tag, different browsers still implement HTML5 differently. Considering the browser compatibility, in order to successfully embed video on webpage using HTML5, developers will need to take into account how the browsers support the HTML5 videos.

As what I've mentioned above, the biggest difficulty with HTML5 video will be preparing and incorporating contents in multiple codecs. Currently, each browser has its own preferred video format among three possible options: H.264(MP4), Ogg Theora(OGV) and VP8(WebM):

What this means in practical terms, is that the video contents will need to be encoded in at least two (optimally all three) video formats in order to work with the HTML5 spec with better compatibility. Fortunately, you have several tools ready to help you convert video to HTML5 video formats:

Firecoresoft Video Converter (Video Converter for Mac): the ideal converting tool, available for both Mac and Windows, converts just about any video source to all of the HTML5 formats you might want to use, as well as several other device- and platform-specific formats.

Firecoresoft SWF Converter (SWF Converter for Mac): a very rare program that can convert Flash SWF video to HTML5 video formats. If you aim to embed an SWF file to webpage using HTML5, this tool is a must to have.

Download Video Converer Mac                       Download SWF Converter Mac

OK, after you get the HTML5 videos prepared, things become much easier. The HTML5 spec allows you to compensate for the browser shortcoming currently happening around the video format. Instead of specifying the video source using the <src> attribute, you can nest multiple tags within the <video> tag, each with a different video source. The browser will automatically go through the list and pick the first one it's able to play. To ensure the compatibility with all browsers, you should also specify video type, as well as the video and audio codec. The specifics of the parameter will depend solely on how you encode your video:

The reason that I add an SWF player object to the code above is that, the older, pre-HTML5 browsers don't support HTML5 <video>. So, for those users, we'll fall back on Flash. After applying the code above, you will successfully embed html5 video on webpage without compatibility problems. Embedding HTML5 video isn't significantly more difficult than using Flash. Feel free to try it out yourself!