Understanding HTML5 Video
Understanding HTML5 Video
–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 make HTML5 videos and 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.
iOS 5 HTML5 Support Internet Explorer 9 HTML5 Support
Comments are currently closed.
Excellent Article!
[…] about the video player coding either. At least you will get the default HTML5 video player. See how to use HTML5 Video tag here. var addthis_config = […]