Introducing HTML5 Video Player Widget on the Adobe Dreamweaver Widget Browser
Announced today, Adobe HTML5 Video Player Widget, based on the Kaltura HTML5 Media Library.
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.
So we’re left with a hybrid solution: HTML5 (mostly for iOS), Flash (desktop browsers & Android, Future Blackberry) and a link to specially encoded video files (in cases of older mobile phones).
This feels kind of awkward. As a web developer, you will now need to:
- Encode your videos in various formats making the video ready for each browser/device
- Detect the browser/device and version of the user client
- Decide on the playback mechanism that is right for that user client.
To take away this headache (and a few others), we came up with the Kaltura HTML5 Media Library – www.html5video.org, which includes an open source, cross browser, cross device, “fallback” player.
Today, the Adobe Web Frameworks team is introducing a new HTML5 Video Player Widget built on a subset of the Kaltura library. It’s a light-weight Flash & HTML5 hybrid solution for video playback across different browsers and devices. Download it through the the Adobe Dreamweaver Widget Browser.
[kaltura-widget uiconfid=”6420041″ entryid=”1_wja4qjp8″ width=”400″ height=”330″ addpermission=”” editpermission=”” align=”center” /]
The HTML player UI is built using jQueryUI, packaged from the Widget Browser, and then customized and integrated into your website using Dreamweaver or any other HTML editor of your choice. This lets web developers focus on their main goal, developing the website rather than overcoming quirks of web video playback compatibility.
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).
Additional features the Player Widget offers –
- Easy to use, cross-browser-device solution for web video playback (seamlessly choose between <video>, flash and link).
- Player UI should look and behave the same across browsers & devices.
- Player UI should be easy to skin or extend. Editing styles through simple CSS.
- Pluggable. Player will provide an easy framework for adding solutions for closed captioning or accessibility features. (demos)
- Open Source!
Using the Video player widget
Using the video player widget is straightforward. Make sure you have Adobe AIR 2.0.3 or later installed, then install Adobe Widget Browser, which is freely available. To learn more about Widget Browser, see the video tutorial.
While in the Widget Browser, go to the Adobe Exchange tab, sign in with your Adobe ID (you can quickly create one for free), search for “video”, choose “HTML5 Video Player” and add it to My Widgets using the bottom-right button. In My Widgets view, you can preview the widget and choose to Configure it, if desired. We’ve made available for visual customization the most common options, such as Autoplay and themes.
If you have Dreamweaver, install HTML5 Dreamweaver pack and start Dreamweaver. Create a new HTML page, choose Insert -> Widget…, choose Kaltura HTML Video Player, choose the desired preset and then click OK. When saving the page, Dreamweaver will automatically add the widget code. You can then preview the page in Live view, or upload it to your site and open it in any major web browser.
If you don’t have Dreamweaver, after you customized the widget, you can copy-paste the HTML from the “Code” tab into the editor of your choice and save the page. From Widget Browser, choose “Save Widget Files”, and pick the same folder where you saved the page.
After you have seen the default video in action, replace the provided video sample sources with your own and update the video tag properties as needed.
If you’d like to further customize the widget beyond what Widget Browser offers, feel free to change the mwEmbed-player-static.css styles inside the kaltura-html5player-widget folder. You can also use the jQuery UI ThemeRoller to design a theme, or even develop your own UI and control the video playing experience via the JavaScript API, as seen in the Kaltura HTML5 Media Library samples.
Where to go from here?
First try it out, and add reviews to the Adobe Exchange Widget page.
Then play around with the code, the latest version of the code can always be found at the Widget Project Page.
What do you think?
