Thursday, March 28, 2024

The Current Reality of HTML5 and the Much-Fabled Video Element

There has been much talk and debate on the topic of HTML5; in particular, the <video> element. Some even speculate the imminent <video> element could spell the death of Flash. The Death-of-Flash bandwagon seems rather premature for me to jump on, after all, Flash is heavily prevalent on the ‘Net and to report on its death is simply sensationalism. After all, YouTube uses a Flash player, and it works on Apple products. Not all video players can make such claims.

Flash is currently at version 10, which is good and bad. While all of the bugs have been worked out, some say it’s a bloated and heavy tool, which causes poor performance issues on netbooks and other devices with lesser power. Is it time for the new kid in town to make an appearance? It looks that way.

YouTube is now running an HTML5 beta site, which can be found at www.youtube.com/html5. Currently, YouTube supports browsers that support both the video tag in HTML5 and the h.264 video codec. These include:

  • Google Chrome
  • Apple Safari (version 4+)
  • Microsoft Internet Explorer with Google Chrome Frame installed (Get Google Chrome Frame)

In addition to YouTube, Google has launched an HTML5 beta program and news is circulating that next month they will announce the free and open source availability of VP8; a codec that is supposed to be superior to h.264. Many are speculating that VP8 will become the new standard, or at the very least, a new option.

Just how well does HTML5 video work in YouTube? First, I tried it in Firefox, just out of habit. I fully realize FF is not listed above along with Chrome and Safari, but just because someone says I can’t do something doesn’t mean I won’t try it at least once.

Nevertheless, I got a message saying that my current browser was not compatible. Next, Chrome was fired up and I quickly joined the beta program once more. After a quick search for HTML5 demo videos I started up the same video that I watched previously outside of the beta. And my heart sank. It was awful. The video was blurry and the sound was pure static. I checked the comments. The first person’s sentiments were the same as mine. The second comment was from the person who posted the video, and I quote, “html5 is still under heavy development and standardization its [sic] hard to port over the billions of video uploaded to youtube so it will be rough. and [sic] HTML5 still has a year of development ahead.”

So, there you have it. HTML5 video is still very rough. The supposed Flash killer is barely working. However, there is light at the end of the tunnel and it’s name is Kaltura. Instead of fumbling around with my own description, I believe the Kaltura site provides an excellent overview:

“Kaltura has developed a full HTML5 Video Library – in use by Wikipedia – that works in ALL major browsers, even IE. The Kaltura HTML5 video player works in all browsers by using a unique ‘fallback’ mechanism – not only for the format of the video that is played, but also for the actual video player version that is used. While support for HTML5 video is growing, there is large percentage of the web browser market that is presently best served by the Adobe Flash plugin and an associated player. A base component of the Kaltura HTML5 javascript library bridges this gap, by cascading to an underlining Flash player in browsers that do not support the native HTML5 video player. In addition, Kaltura’s player maintains a unified look & feel across formats and browsers. Kalturas platform provides automatic transcoding into all supported formats (OGG, H.264, MOV, FLV etc.).”

After reading that, I had to download the Kaltura Video Solution and test it myself. Unfortunately, this video solution went over my head. Fortunately, I did find some HTML5 sample code:

<html>
<head>
<script type="text/javascript" src="http://html5.kaltura.org/js" > </script> 
</head>
<body>
<video poster="myPoster.jpg" style="width:400px;height:300px" durationHint="32.2" >
    <source src="myOgg.ogg" />
    <source src="myH.264.mp4" />
</video>
</body>
</html>

If you copy this into your HTML page and update the poster and source to your own files then you should get working video in Chrome–and only Chrome. In Internet Explorer the player does not appear and in Firefox I see the player and the poster but when I clicked to play all I got was, “Loading…” It probably goes without saying that the video never did load.

I really like the idea of the <video poster>. This feature allows you to place an image file in the video player window as a place holder before the video starts playing–which I figure is a much better alternative to a blank screen-which is what I have now in my Flowplayer videos, because I do not have them set to autoplay.

If the future of online video is HTML5, then in this author’s opinion there is much work to be done. In the meantime, Flash is alive and kicking as strong as ever.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured