Let me start by saying that the HTML 5 video tag is one of the most over-hyped and misunderstood buzzwords to hit the intertubes in a long time.
Is it a potentially game-changing technology? For sure.
Does it signal the end of flash? I don’t think so.
Do you need to quickly redesign your video-heavy website? Hold on!
But the real question for HTML 5 Video in 2010 is “Are we there yet?” and the answer is “Not quite.”
The idea of being able to embed video on websites without plugins has set the web a buzz with outrageous claims of Flash’s demise, true streaming without special server software, and other misconceptions. The truth is that a lack of widespread browser support for video codecs and the fact that Internet Explorer doesn’t even support the video tag at all means the technology has a long way to go before it is mainstream. Don’t get me wrong, seeing that awesome Jilion Sublime Video player demo (http://jilion.com/sublime/video) gets me excited about it too. Even big sites like Hulu, YouTube and Vimeo have introduced new HTML5-based video players. Part of the excitement is that Flash has dominated the online video player market for a long time without much competition. The latest generation of mobile video devices like the iPad and iPhone, that do not support Flash, has left content providers scrambling to find compatible methods for delivery.
The facts about the HTML5 video tag
For anyone who is not familiar with the HTML5 video tag, it is a new HTML tag being introduced to the HTML5 specification as a way to embed videos in web pages without the end user needing any additional plugins. Web developers can use JavaScript to control the player and add interactive features like playlists.
Both progressive download (known as HTTP streaming) and real-time streaming protocols are supported by HTML5 video. One really cool feature is that it will allow the user to seek to parts of a HTTP streaming video that have not yet downloaded. Currently, with Flash-based players, you can only seek when the video is being served from a real-time streaming server. While this new feature will enhance existing HTTP streaming implementations, it will not be a replacement for real-time streaming servers which allow the content provider to protect videos from being downloaded and other advanced features.
One area where HTML5 video shines is as a website fall back player for Apple and other devices and the multiple frame sizes and data rates they support. For website visitors on desktop browsers, you can offer them a high quality FLV or H.264/.mp4 video in a Flash based player. If Flash or JavaScript is not supported you can provide a HTML 5 video tag as a fall back player. The tag allows you to specify multiple source files that the browser will step through until it finds one it can play. This means you can setup a 1280×720 high quality H.264/.mp4 video for iPad as the first one, a 640×360 for iPhones as the second and a default 320×240 for older devices as the final. Depending on which devices you want to support, you can add additional options as necessary.
Current limitations
At this time, the HTML5 spec is still being developed and browser manufacturers can’t seem to agree on a single video codec for native video support. This means if you want to use the HTML5 video tag, you will need to (re)encode your video to multiple formats to support the different browsers. Safari, Apple devices and Android support certain variations of H.264/.mp4 video. Firefox, Opera, and Chrome support a open source codec called Ogg Theora Video. One downside to the Ogg Theora video codec is since it is relatively new and still under development, the quality does not compare to H.264 and there is no hardware decoding support. Hopefully, with it’s recent purchase of On2 (creators of the high quality VP6 FLV codec), Google will step in and provide a high quality codec that all browser manufacturers will support.
To make matters worse, Internet Explorer does not yet support the HTML5 video tag. This will be a deal-breaker for many developers or at least require workarounds if they want to start implementing HTML5 based video players today.
Will it replace Flash?
I don’t think HTML5 will replace Flash any more than DHTML and AJAX replaced Flash. Flash is a mature technology with wide adoption and a huge feature set. It is an established platform for creating rich user experiences and used for much more than just a video player. If anything, once the HTML5 video tag is widely supported, it will offer video content providers an additional way to enable video on their sites.
Final Thoughts
Until more headway is made with regards to codec and feature support, use of the HTML5 video tag should not be used as the sole means of providing video playback on production websites. Also, I would be hesitant to reencode a large number video assets since the codec may change in the near future. Content providers with video heavy web sites should keep a close eye on the progress and may want start using the HTML5 video tag to enable device users to view their content.
Lately I have seen lots of tutorials instructing web developers on how to provide a HTML5 video tag based player that defaults to a Flash player if not supported. I think this is a bad idea and should probably be used the other way around. I would rather my Firefox users be presented with a high profile H.264 video as opposed to a mediocre Ogg Theora video.
Due to the complexity of getting started with HTML5 video players including setting up advanced features, encoding multiple videos for different browsers and providing fall back solutions for unsupported browsers, many users who simply want to add video to their sites may be better off using a single H.264/.mp4 video played in a Flash-based player like the JW Player or Flowplayer which will work in virtually any desktop browser.
Having native browser support for video and a decent alternative to using Flash-based video players is long overdue. I can’t wait until the kinks are worked out and HTML5 video can fulfill its destiny.
In a follow up post I plan to show you how you can use the HTML5 video tag on your websites to enable video for Apple’s iPad, iPhone and other devices. Until then, make sure you check out the resources below to learn more.
Additional Resources
HTML5 video tag basics
<video id=”videoid” poster=”posterframe.jpg” controls=”controls” >
<source src=”video.mp4″ type=”video/mp4″ width=”480″ height=”270″ /> <!–H.264 for Safari, Chrome, Apple Devices–>
<source src=”video.ogg” type=”video/ogg” width=”480″ height=”270″/> <!– Ogg Theora for Firefox 3 and Opera –>
<p>This video not supported in your browser.</p>
</video>
Player creation tutorials, tips & tricks
http://www.html5video.org/kaltura-html5/
http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/
http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback
Encoding guides for currently supported formats
http://diveintohtml5.org/video.html
Further reading
http://newteevee.com/2010/04/12/google-to-open-source-vp8-for-html5-video/
http://arstechnica.com/open-source/news/2009/07/decoding-the-html-5-video-codec-debate.ars
http://www.internetnews.com/dev-news/article.php/3828901
Related posts
One Comment
Great overview on html5′s video implementation. You brought up good points that IE hasn’t even supported it yet. It seems like all the modern browser can’t even come to terms about what format or codec to use. One thing I do like about it is how easy it is to embed video. Flash needs to tighten up their game.