Embed Video in HTML5 Websites

How would you embed a video into web pages employing the HTML5 syntax? We know that HTML5 introduces a video tag to replace previous object tag to specify videos in HTML pages. Embedding videos in HTML5 websites and pages is straightforward:

<video id="sampleid" src="videosample. mp4" controls></video>

It is just that simple! That’s all you'll have to do when adding a video player for a site, no third-party add-ons or embedded code via other sites — one simple tag is all you need.

However that’s not all, what skilled HTML5 users concerning about is the browser compatibility. The complexity involving HTML5 arises not through the syntax, but via browser support along with video encoding.

Template designers are used to being affected by browser compatibility, but you need to wider-than-usual disagreement amid browser vendors with regards to codec standards. So as to build a profitable HTML5 site, you’ll need to consider how modern web browsers and surfers implement HTML5 online video Web standards and also how to take care of how users watch video in legacy browsers. The main browsers you need to consider about are Chrome, Firefox, Safari and Internet explorer.

The <video> Tag

In HTML5 embedding video essentially comes down to using a single tag: <video>. But other than that, you have a lot of options for parameters. Here are the essentials within the video tag itself:

src: specify the location and name of the source video, you can specify width and height (optional) dimensions of the video;

controls: adds a default video control overlay. This is useful if you don’t want to create your own custom control. However, if you do want to delve into customizing the player controls, you can use JavaScript and CSS. HTML5 Video Player is a good example.

preload: begins downloading the video as soon as the user hits the page. 

Bellow is a quick HTML5 video code sample:

<video width="640" height="360" controls>
<source src="samplevideo.mp4" type="video/mp4" />
<source src="samplevideo.ogv" type="video/ogg" />
<source src="samplevideo.webm" type="video/webm" />
</video>

Video Codecs

As already mentioned, your biggest challenge with HTML5 video will be preparing and incorporating your content in multiple codecs. Currently, each browser has its own preferred video format. And it appears that the fractured implementation of HTML5 video will get worse before it gets better.

Right now you have three possible options for encoding your video:

1. H.264 – a popular format that can take advantage of hardware acceleration, supported by graphics chips in desktops and devices; also the default recording format for many of the newer video and mobile devices on the market; however the format is patented and while it remains royalty free for non-commercial use, it gets complicated, and potentially expensive. Supported by: IE 9, Safari 3.1, and Chrome (for now)
2. Ogg Theora – an open standard that is not patented and is royalty free. Supported by: Firefox 3.5, Chrome 4, Opera 10.5
3. VP8 (WebM) – a newer standard recently acquired by Google and released as an open source, royalty-free (but still patented) format. Supported by: Firefox 4.0, Chrome 6.0, Opera 10.6.

Video Converters

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

Handbrake: Another open source converter for Mac and Windows (and Linux), Handbrake makes a good tool for converting specifically to H.264.

MPEG Streamclip (): While not open source, MPEG Streamclip is available for free for both Mac and Windows. It, too, handles on lH.264, though it also converts to many other useful formats for use outside of the HTML5 spec. 

Firefogg: Kind of a specialty tool, Firefogg is a Firefox extension that converts video to Ogg format only, hence the name. To use it, you’ll need to download Firefox first, and then install the extension.

HTML5 Video Player: HTML5 Video Player software is the easiest way for you to encode your video to HTML5 video compatible format and embed into your own website with a few mouse clicks. Features:1. Encode video files to HTML5 video compatible format(include MP4, WebM, Ogv) in a batch mode.2. Support all modern and old web browser with HTML5 video and Flash fallback.3. iPad/iPhone and mobile device compatible.

Miro Video Converter: Your primary tool, this open source converter, 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.