How The HTML 5 War Has Been Won, By Adobe and Kaltura

Many people out there think that a war was brewing. That it was us versus them, that one thing is better than the other and that, in Highlander style: There can be only one. Adobe proved them all wrong this week by incorporating Kaltura’s HTML5 video player widget into their Dreamweaver web framework via the HTML5 Video Player Widget.

See, there was no war at all. People just like to sensationalize things, people like to have conflict and think that just because something new comes along, something older must fail. But that’s just not really how it works. Flash has been around for a long time, it serves many purposes, and now, Adobe is allowing web developers to reach all platforms with their video content. The HTML5 widget will allow web developers to publish once, utilize multiple encoded versions of their videos and reach old browsers, new browsers, mobiles (even iOS so stick that in your Adobe-hating hat) and pretty much everything else.

There was only the perception of conflict between Adobe Flash and HTML5 and that wouldn’t make any kind of sense anyway. HTML5 is years away from ratification, years away from full usability and even when it’s ready, it won’t replace Flash fully. The WWW eco-system is more than capable of allowing both Flash and HTML5 to live in harmony. It’s the people who cause the problems.

Adobe Embraces HTML5 Video

I had a quick chat with Shay David at Kaltura to get his thoughts on what this means for Adobe, the web developer community, Kaltura and of course, the end users. Not being a Dreamweaver user I can’t say exactly how much time this will say those users. I still use a small coding app called PSPad to hand code my websites. But I imagine that it could be quite a handy little tool for them.

What this really does is takes a lot of stress off the web developer. No longer do you need to worry about what platform people are using to view your video content. There are several devices that don’t support Flash (cough *Apple* cough) and so the question became, how do you reach those users with your video content in a quick and easy fashion? Sure you could, as we have demonstrated, write some code to first detect the user’s browser and device and then to decide what’s needed to display the video for them. Those days are simply gone.

The Technical Stuff

The HTML5 Video Player Widget incorporates both Flash and HTML5 and the code looks like this:

All you need to do is choose the color options for the player’s toolbar, point at the proper image and video files and you’re set, provided you’ve uploaded all of the necessary files to your web server. For those who have loads of videos on your sites you could easily take this code and wrap it in your programming language of choice for the web, mine is PHP, to show any and all videos you’ve got available.

If you’re familiar with CSS then you can work with the skinning on the player via the CSS file. It will skin the player in both Flash and HTML5 so that you have a completely consistent experience across browsers and devices.

Of course, HTML5 is still new and doesn’t offer all of the functionality that the Flash side of things does. Things like analytics, advertising, accessibility and captioning are still in the works mostly. Kaltura’s open source community of over 3,000 developers is already working on these things.

The Flash media player used as fallback is built on top of OSMF – the Adobe Open Source Media Framework – and is used as a black box encapsulating only the media playback (what should be on the browser level in case of HTML5).

If you’re not familiar with CSS and/or don’t used Dreamweaver but still want this basic Flash and HTML5 functionality you can use the Adobe Widget browser, which is freely downloadable, and download the HTML5 Video Player Widget, also freely downloadable. Then it’s just a matter of choosing one of their 25 pre-made themes and dropping it into place. Boom Pow Kung Pao! You’re all set. You will need an Adobe ID (a free account) to use the widget browser.

What are Widgets?

Adobe widgets are generally a combination of CSS, HTML, Javascript and give extra functionality. The widget browser itself is an Adobe Air application. The main CSS file is mwEmbed-player-static.css in the kaltura-html5player-widget folder which you can access by clicking Save Widget Files in the widget browser. You can even develop your own themes, User interfaces and control the experience through the jQuery UI ThemeRoller and the Javascript API.

Don’t Beat Them, Join Them!

This is a slick move on Adobe’s part. They are, which many forget, far more than just Flash. They are also a maker of web development software and this will allow them to, as Shay said, “remain the favorite tool for web development regardless of platform and bridge the gap between Flash and HTML5.”

Through collaboration and inclusion Adobe not only assures their position as a provider of web development software, but also helps all web developers show video on all platforms thanks to Kaltura’s help.

Kaltura and the Widget Project

The Kaltura HTML5 Video Player Widget is of course going to need help pushing forward. Kaltura’s HTML5 Video Library may be installed in conjunction with existing flash video integrations to provide fall forward from flash to html5 to enable video embedding for iPhone and iPad.

The ThemeRoller (web-usable in FireFox) can help you quickly develop your own theme for the player. It’s all CSS so you can then download the file and drop it into place for instant implementation.

Of course Kaltura’s HTML5 video project needs help. It needs developers who can build out plugins that will continue to expand the usability of the open source player. The plug-ins can be Javascript libraries for web applications that allow much more than simple playback to create a full featured web-video experience – Import and upload wizard, Video Editor, Client Side Encoding (for example Fireogg).

If you don’t need advertising and analytics then you could implement the whole thing right now. What I really think that is missing from the project is the ability to incorporate your own, pre-existing Flash video player. I dug into the code in the mwEmbed-player-static.js file which references the KDP3.swf (Kaltura Dynamic Player). It looks possible that in the future there might be a way to incorporate your own Flash player.

The Take Away

If you’re already in the online video game and using advertising, analytics and other features like DRM in your Flash player, you’ll certainly not want to move over to this and instead write your own fallback code to utilize your current player. If you are more concerned about everyone seeing your videos, regardless of platform and not concerned about in-player monetization (you could still show companion ads and banners), then you could definitely use this to get up and running quickly.

In my mind it’s still in more of a tech demo state than a fully usable one. With the lack of ads, metrics, and other more advanced features, it’s just a cool tool to play with and a step towards the future. If the development community really digs in and starts developing add-ons it could be the way of the future for open source online video. If the big online video platforms and video ad networks get involved and start programming their own plug-ins that could rapidly speed both the expansion of the functionality and the adoption of this. Since it’s Open Source it means that it’s going to be developer community-driven more so than anything else. Right now I feel that the HTML5 player possibilities are a fragmented mess. Every one is building their own stuff for it. Kaltura has the potential to bring them together and “in the future bind them,” they could be the Lord of the (HTML5 Video Player) Rings. But like I said, it’s going to depend on developer support. Kung Pao! I’m out.