Adobe Flash is still the most popular HTML video player as of now. HTML5 video is just a new comer. Flash is the middleware to play online videos. Flash takes advantages of the object tag to embed video into a website, the most traditional way for online web videos’ implementation. In order to play your HTML videos online with Flash player, your site visitors will need to download the Flash plug-in to help play video in their browsers. They will need to download the Flash player separately several times for different web browsers if they have more than one browser and want to play Flash video on all the browsers they have. Also as a middleware, Flash is in constant development in order to catch up the fast growing online video industry. As a result, site visitors are required to download and upgrade the Flash player plug-in whenever an update is available.

When your site visitor does not have the video player installed or not be able to keep it up to date, your HTML video is invisible to them. It is annoying to receive messages saying “Install Flash plug-in to watch this video” when browsing around the web. This impairs the user experience and raises a website’s bounce rate. That’s why we need to play HTML videos without any plug-ins, and it explains why HTML5 video is going to take over.

It doesn’t matter as to which HTML video player you utilize, the traditional HTML video or the new HTML5 video, the important thing should be to provide instant access to your video content for all your visitors despite the video players, internet connection speed, browsers, hardware. Nowadays, internet users have ‘short temper’, they will not spend much time on your site because they have many other options around the web.

Considering this, you may tend in the direction of HTML5 video technology. HTML5 is going to be the ultimate web video solution. HTML5 guarantees to deliver video directly within the browser with no plug-ins. But before you decide to switch your site video to HTML5 video, let’s evaluate the benefits and drawbacks of traditional HTML video and revolutionary HTML5 video. Through the comparison of HTML video and HTML5 video, you will understand their pros and cons, you will know how to avoid the advantages.

HTML Video vs. HTML5 Video

Before digging into HTML5 video further, you might think HTML5 video has more drawbacks compared to the classic HTML video. HTML5 video has worse web browser compatibility, it requires video conversion, you will also find it is hard to find a free HTML5 video hosting service, and so on. Sound scary? Don’t worry about that, we will introduce some solutions to the HTML5 video problems here. You will find out that the HTML video cons are actually harder to avoid on the contrary.

HTML5 Video Browser Compatibility

Old web browsers might not support any HTML 5 video types at all (H.264, OGG and WebM). Even the latest browser might support certain HTML 5 video codec. However we can include all the three HTML 5 videos in a single HTML5 video tag for maximum compatibility with all web browsers. Check out the details here to see: How to maximize HTML5 video browser compatibility?

HTML5 Video Conversion

Converting HTML5 into the three formats (H.264, OGG and WebM) could be very easy as long as you get the correct HTML5 video converter tool. We recommend here following great HTML5 video converters.

HandBrake Video Converter: the famous free video converter software.

Zamzar. Free online video converter. Zamzar encoding is bit slow. Besides, you will get files by email.

HTML5 Video Player: Professional HTML5 video converter and player. The easiest HTML5 video solution so far! You can batch convert HTML videos or any other videos into HTML5 video formats, with fancy customizable web video players, embedding code will be generated automatically.

Freemake Video Converter: Batch convert video files in all three HTML 5 video formats and basic video player code for embedding. Once select and add the source video clips to the video converter, need to click ‘HTML5’ button as the output profile, as it is not specially designed for HTML5 video or its web integration.

HTML5 Video Player Design

Web designers and developers can design and style their own HTML video player, use free video widgets or purchase fancy players online. You can use CSS3 and JavaScript to style your HTML5 video play and add extra video controls. Beginners can also use the basic default HTML 5 video controls. Some HTML5 player such as the one we have mentioned above (HTML5 Video Player) has built-in HTML5 players. So you do not need to worry about the video player coding either. At least you will get the default HTML5 video player. See how to use HTML5 Video tag here.

–Why HTML5 Video and the way to use it?

Overview: What is actually HTML5 video, and how could it be different through what you have been used? Any problems could HTML5 video possibly solve, and any issues with the HTML5 videos itself? Learn how you can embed HTML5 video into website, explore its web browser compatibility.

Online Video Brief Review

Early in the 1990s, we have Apple QuickTime and Microsoft Windows Media Player as desktop video players that played videos on computers only. In 1995 RealNetworks introduced RealAudio Player which was able to audio over the Internet. Online video was a reality not until early 2000s after the network bandwidth enhancements and media technology advancements. In 2002 Macromedia introduced the Flash Video with FLV as format, VP6 as its codec. In 2005, the launch of YouTube made Flash Video the de facto standard of the web video.

Flash Video Issues

Flash Video worked almost flawlessly with Flash Players. However being one of the most popular forms of online video and entertainment, Flash videos have many flaws as well. Users will need to install and upgrade the Flash player plugin any time there is a upgrade available. It is annoying to maintain both the browsers and plugin. Some browsers or old browsers do not work well with the Flash player plugin, thus you may find the Flash video glitches or errors at times. The Flash Player can also cause communication errors with the web browser and ActiveX applications. In addition, flash has poor stability and security issues, many portable devices still do not support it as of now.

For most of us, layman/non-technical people, the making and implementing of online video with Flash is still a pain. And with time pass by, this pain was not eliminated. Although we have some commercial software that are able to relieve the pain of Flash making and implementing, such as Flash Slideshow Maker that convert static photos to dynamic flash, Flash Banner Creator which makes flash banners, Slideshowzilla, a tool to turn photo albums into slideshow with Flash SWF output, etc. These easy Flash tools can free non-tech person from learning and understanding of Adobe ActionScript or encoding the videos. Other than that, they can generate the embed code of a Flash object, this makes the embedding of Flash into websites much easier.

Why HTML5 Video

The early online video was in an unstandardized mess. Online video has been crippled by incompatibility problems between different browsers, codec, formats, OS, etc. Since the Flash takes over, it becomes the de facto standard of the web. In 2007, Opera proposed the <video> tag in the Web Hypertext Application Technology Working Group (WHATWG) working draft. The intention was to “make video a first-class web citizen in an easy, open solution to integrate video into web pages and native support for video in browsers.”

In July 2009, the W3C, an organization founded by Time Berners-Lee to ensure compatibility and agreement among industry members in the adoption of new standards, announced that it planned to let support for XHTML expire and to begin work on HTML5. Today, all modern browsers (and Windows Internet Explorer version 9) support the <video> tag, and the API is largely consistent.

HTML5 Video Problems

The specification with regard to HTML5 video is still young, you can still find some problems of it. The most apparent issue is its compatibility with different browsers and browser versions. It’s not supported very well by some browsers so far. See this article about: HTML5 Video Browser Compatibility. The full-screen capability, that is taken for granted in Flash, can’t be found with HTML5 video. The video codec and formats still kind of chaos, see: HTML5 Video Formats and Codec.

The way to use HTML5 Video

Compared to the lengthy Flash Object embedding code, the embedding of HTML5 video is much compact. Here is a simple HTML5 Video code as an example:

<video controls src="http://html5videoplayer.net/videos/toystory.mp4"></video>

A more detailed HTML5 Video example as follows:

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

To maximize the browser compatibility with HTML5 videos, we can use a sample HTML5 video code as bellow:

<video width="640" height="360" controls>
<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>

Multiple video sources are accepted in HTML5 video tags, web browsers will pick the first compatible one to play from the list. Any one a browser doesn’t recognize it will simply ignore it.

A loadfail or fail-over image is also a good option for browser backwards compatibility. Here is a HTML5 video example:

<video width="640" height="360" controls>
<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" />
<img src="http://html5videoplayer.net/images/html5-icon_256.png" />
</video>

Now you know the basics of HTML5 video and how to use it. What’s your opinion of the HTML5 video, leave it in the comment bellow.

Major browsers that support the <video> element are Internet Explorer 9, Firefox, Opera, Chrome, and Safari. However not all these browsers support all the three HTML5 video formats due to the licensing and patent requirements for some video/audio codec. For example, IE 9 supports MP4, not the other two video formats. Mozilla and Opera refuse to support H.264. For the HTML5 video browser compatibility details, see bellow table:

• MP4: MPEG 4 files with H264 video codec and AAC audio codec
• WebM: WebM files with VP8 video codec and Vorbis audio codec
• Ogg: Ogg files with Theora video codec and Vorbis audio codec

For greater browser compatibility for HTML5 videos, we need to embed different HTML5 video formats and files into the same web page for the same video. However this could be a considerable encoding headache for most of us. Thus some HTML5 video players have built-in with the capacity of converting videos into different HTML5 video formats in a batch mode. That’s to say, you can import one source video clip and such HTML5 video players output 3 different video clips in different HTML5 formats.

Another browser support issue of HTML5 video are about those old browsers, such as Internet Explorer 8 and earlier versions of other browser that do not support the <video> element. To compensate, make sure that you add a fallback Flash version as well. Actually HTML5 Video with a fallback to Flash is very popular now, as Flash is still the most popular video formats around the web nowadays. You will need to put the old-style Flash embedding code inside the HTML5 <video> element as fallback, so that if the browser doesn’t know anything about the HTML5 native video, it defaults to the Flash fallback content inside the tags.

However sometimes, if a plugin such as Flash is not installed on your browsers, the Fallback will not help. For extra html5 video compatibility when Flash is not installed, you can display an image or download link of the HTML5 native videos.

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.