Introducing HTML5 Video Player Widget on the Adobe Dreamweaver Widget Browser

by Zohar Babin

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.


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?

21 Responses to “Introducing HTML5 Video Player Widget on the Adobe Dreamweaver Widget Browser”

  1. So do I need to install something to see HTML5 videos? I thought it was going to be built-in to the browser.

    • Hi Kris,

      Yes, HTML5 is all in the browser (just like HTML4 and earlier).
      However, not all browsers (especially older versions of browsers) support the HTML5 features.
      More so, the experience is not consistent across all browsers that do support the features. And in fact, to implement some features like the video tag, some browsers like Safari actually still use a plugin (quicktime in Safari).
      Thus, to provide a cross-browser experience, the HTML5 Media library provides a JS bridge with HTML based UI that creates a unified UI, and for browsers that don’t support Flash, it gracefully degrades / fallback to Flash for playing back the video.

      • So where do we include the embed code for the Flash video? I’m assuming it’s needed? Would this then go after the tag?

        Also, does this require that 4 different video files be maintained?

        • Hi Brian,

          The widget doesn’t do conversion or anything, just handles a single deployment of the same html5/flash video player UI and js API.
          If you’re going to deploy to all devices out there, you will need to convert your videos to all the needed codecs (essentially you should be good with h264 and 3gp for all of them).
          If you will use the Kaltura Platform on the backend, that will do the conversion and management work of the videos for you.

          • I have installed the widget via dreamweaver, and the videos (I have them in m4v and ogv format) play fine in Safari, Chrome, Firefox – basically any browser except for IE. I have tried the video on IE 7 and 8 and the audio plays, but there is no picture with it. I’m still confused about whether or not I need to include the embed code for the Flash video… I don’t know a whole lot about coding, so the comments above may have answered that question, but I don’t see it… Can you help me figure out how to get the picture to display along with the audio?

            Thanks,

            Selwa

          • hi,
            since IE7 and IE8 don’t support HTML5 you need to include the Flash code so that the library will detect HTML5 is not available and replace the video tag with Flash.

  2. How can a playlist be added to this? Say a side panel with a list of videos that is played in a main video pane.

  3. Thanks for posting – really helpful! The video player widget is a great one to have.

  4. Heya i am for the first time here. I found this bord and I find It
    really useful & it helped me out much. I hope to give something back and aid others like yoou helped
    me.

  5. Trackbacks

Leave a Reply