Screenshot of the Adobe’s Video Player Widget.
Perhaps Adobe realizes that video won’t be an all Flash affair in the upcoming HTML5 years and this is just their first foray into a new and foggy future. Either way, we say thumbs up for integrating Kaltura’s open source player into the Adobe Widget Browser ecosystem.
The Widget is available through Adobe’s Widget Browser, an exchange program for short bits of useful code such as the video player, various jQuery effects, and Google Maps integration among others, that can be integrated with Dreamweaver or used to grab the HTML if coding by hand is your thing.
From Adobe:
Code generated from the widget plays video in the best possible player for the requested platform using a range of video codecs. Based on the Kaltura open source library, the HTML5 Video Player widget is fully cross-browser compatible with support for Internet Explorer, Firefox, Safari, Chrome, and Opera. Moreover, the player is completely customizable with industry standard CSS techniques, as used in the jQuery ThemeRoller web application. For the ultimate in control, the HTML Video Player widget is JavaScript-driven and provides a robust set of easy-to-extend library functions for importing, editing, and even client-side encoding.
Options to customize the player are relatively simple right now, essentially giving you the ability to decide whether to autoplay the video and apply some light skins. For those that like to roll their own, here’s a look at the code the Widget spits out.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML5 Video Player : Untitled 1</title>
<script type='text/javascript' src='kaltura-html5player-widget/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='kaltura-html5player-widget/mwEmbed-player-static.js'></script>
<link type='text/css' href='kaltura-html5player-widget/mwEmbed-player-static.css' rel='stylesheet'/>
<style type="text/css">
@import url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/ui-darkness/jquery-ui.css");
</style>
</head>
<body>
<video width="" height="" poster="images/elephants-dream.jpg" duration="10:53" preload="metadata" >
<source type="video/webm" src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/elephants-dream_400p.webm" />
<source type="video/h264" src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/elephants-dream_iphone.m4v" />
<source type="video/ogg" src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/elephants-dream_400p.ogv" />
</video>
</body>
</html>
Simply copy the code between the video tags, and make sure to include the Javascript between the head tags and you’re good to go.
For those that use Dreamweaver, here’s a video tutorial that demonstrates how to use the Widget Browser with that program:
As Zohar Babin, Kaltura’s Head of Developer Relations and Community, notes on the Kaltura Development Blog:
The main reason why HTML5 is raised in every session or workshop on web video lately is due to mobile devices that don’t support Adobe Flash (*cough* iOS). Alas, whenever HTML5 is presented as the “standard-compliant-preferred” solution for doing cross-device video playback it raises many eyebrows, and rightfully so – some claim that HTML5 isn’t ready yet for production websites. At least not on its own. And further, most mobile devices don’t support the freshly not-yet-fully-spec’d standard.
Nice to know they’re tools out there that are making this easy.
