HTML5 Video

July 4, 2012 html5video HTML5 Video

 What is HTML5 Video?

As of June 2012, HTML5 is still under development. HTML 5, in particular, adds many new syntactical features. The new <video> tag is one of them. Improving the markup language with support for the latest multimedia and keeping the readability by more portable devices has become the main aim of the development of HTML5 and HTML5 video tags.

That explains why there are many new tags for multimedia have been included in the new HTML5. Except the video tag, you can also find <audio>, <canvas>, <source> elements, etc.

Videos are becoming more and more popular in different websites, many modern websites show videos. However, there is no industrial standard for displaying a video or movie on web pages so far. Other than browsers themselves, most websites display videos through browser plug-ins. Without a plug-in for browsers, users will not be able to play most videos on the web. One of the biggest benefits of HTML5 video, its native video support.

HTML5 video tag

The W3C thus introduces this HTML5 video element a new standard for showing videos on the internet. But no browser can now fully supports all HTML5 new features and elements yet. Support is patchy and is largely dependant on the whim of the browser manufacturer.

Take the <video> element, which is probably one of the most frequently used elements around all the internet and websites, for example, Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <video> element. Earlier versions of IE do not support the <video> element though. See the details of: HTML5 video browser support and compatibility problems and solutions.

HTML5 video formats

The video formats that you can currently embed into the <video> element are MP4, WebM, and Ogg. These three HTML5 video formats are not universally supported by all browsers either. For example, IE 9 supports MP4, not the other two video formats. Opera 10.6 supports WebM and Ogg, not MP4. To embed HMTL5 video, you have to include multiple HTML5 native videos and formats for greater cross browser compatibility.

For cross browser compatibility, a temporary solution is to make different video formats and embed them into the video element in HTML5. It is painful for most webmasters, we know, however that is the only fix we can think of as of now.

HTML5 video sample code

Bellow is the html5 video sample code you can customize and apply to your web pages in order to insert video to HTML5 pages:

<video controls="controls" poster="http://html5videoplayer.net/poster/toystory.jpg" width="640" height="360">
<source src="http://html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />
<source src="http://html5videoplayer.net/videos/toystory.ogv" type="video/ogg" />
<source src="http://html5videoplayer.net/videos/toystory.webm" type="video/webm" />
</video>

Note: The <video> element allows multiple <source> elements. <source> elements can link to different HTML5 video files. The browser will use the first recognized format.

HTML5 video tools

Socusoft has recently released a new HTML5 Video Player for both Mac and Windows users. This is a practical HTML5 video encoder, converter and player software which helps webmasters, bloggers convert their videos to HTML5 video format and embed into their websites with just a few mouse clicks. Almost no HTML 5 coding knowledge required. You can download the HTML5 video player here.

This HTML5 Video tool can convert source videos into different HTML5 video formats in a batch mode, it generates the code snippet automatically as well so you can simple copy and paste into your web page source code. What’s more, it comes with the Flash fallback functions, that’s to say, when the users’ very old browsers do not support HTML5, they can still play your online video as Flash video.

html5 video, video in html5, what is html5 video

HTML5 Video Player Software for Webmasters HTML5 Video Player