Kaltura HTML5 and JavaScript Media Library

Kaltura's HTML5 Media Library enables you to take advantage of the html5 <video> and <audio> tags [1] today with a consistent player interface across all major browsers including Internet Explorer.

The library supports a seamless fallback with Flash based playback using Kaltura's Flash player [2] or Java Cortado for browsers that don't yet feature HTML5 video & audio support. Upon detection of the client browser, the Kaltura HTML5 Media Library chooses the right codec to use (specified in the source attributes, or available from a Kaltura server) and the right player to display. So whether you're using flash, h264, ogg-theora, or WebM -- Kaltura's library will make sure it is played on all browsers with the same UI.
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.

Ad Support Integration

The AdSupport Module includes a simple api to integrate ads into the player.

See an example page here [3]

Loading Ads in JSON format

mw.load("AdSupport",function(){

       mw.addAdToPlayerTimeline( embedPlayer, ['preroll', 'bumper','overlay', 'postroll'],  {

                // Set of ads to chose from

                'ads' : [

                        {

                                'id' : { Add id}

                                'companions' : [

                                        {

                                                'id' : {Number} index of companion target 

                                                'html' : {String} html text to set innerHTML of companion target

                                        }

                                ],

                                'duration' : {Number} duration of ad in seconds

                                // Impression fired at start of ad display

                                'impressions': [

                                        'beaconUrl' : {URL}

                                ]

                                // Tracking events sent for video playback

                                'trackingEvents' : [

                                        beaconUrl : {URL}

                                        eventName : {String} Event name per VAST definition of video ad playback ( start, midpoint, etc. )

                                ]

                                // NonLinear list of overlays

                                'nonLinear' : [

                                        {

                                                'width': {Number} width

                                                'height': {Number} height

                                                'html': {String} html

                                        }

                                ]

                                'videoFile' : {URL} video file to play for the ad

                        }

                ]

                // List of companion targets

                'companionTargets' : [

                        {

                                'elementid' : {String} id of element

                                'height' : {Number} height of companion target

                                'type' : {String} Companion target type ( html in mobile ) 

                        }

                ]

       }

});

Loading Ads in VAST format

If you ad service is in VAST format you can use the VAST loader and parser. This loads the ad data over the jsonp xml proxy

mw.load("AdSupport",function(){

   mw.AdLoader.load( {URL of ad XML}, function( adConf ){

        // Now you can call addAdToPlayerTimeline with the adConf

         mw.addAdToPlayerTimeline( embedPlayer, ['preroll', 'bumper','overlay', 'postroll'], adConf );

   });

});

Advanced Examples

Fall Forward from Flash to html5 for iOS and Android Support

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.

Installing html5 support to an existing Kaltura integration is as simple as adding a javascript tag to include http://html5.kaltura.org/js [4]. The library will automatically replace your Flash embed with an html5 <video> element on browsers capable of parsing the tag.

    <!DOCTYPE html>

    <html [5]>

    <head [6]>

      <title [7]>Fall forward from Flash to html5</title [7]>

      <script [8] type="text/javascript" src="http://html5.kaltura.org/js"></script [8]>

    </head [6]>

    <body [9]>

      <h2 [10]>Fall forward from Flash to html5</h2 [10]>

      <object [11] id="kaltura_player" name="kaltura_player"

        type="application/x-shockwave-flash"

        allowFullScreen="true" allowNetworking="all"

        allowScriptAccess="always" height="330" width="400"

        data="http://www.kaltura.com/index.php/kwidget/cache_st/1274763304/wid/_243342/uiconf_id/48501/entry_id/0_swup5zao">

        <param [12] name="allowFullScreen" value="true" />

        <param [12] name="allowNetworking" value="all" />

        <param [12] name="allowScriptAccess" value="always" />

        <param [12] name="bgcolor" value="#000000" />

        <param [12] name="flashVars" value="&" />

        <param [12] name="movie" value="http://www.kaltura.com/index.php/kwidget/cache_st/1274763304/wid/_243342/uiconf_id/48501/entry_id/0_swup5zao" />

      </object [11]>

    </body [9]>

    </html [5]>

Themeing with jQuery-UI

You can add a custom jquery ui theme by using the theme wizard: http://www.kaltura.org/apis/html5lib/kplayer-examples/Player_Themable.html [13]. Note that although the themeroller only works in Firefox, the temes you create with it will work in multiple browsers.

Skinning and Themeing

You can add a custom jquery ui theme by using the Theme Wizard [13]. Downloading that theme and adding a reference to jquery-ui-.custom.css after the mwEmbed-player-static.css file.

A few sample jquery ui skins are included in the skins/jquery.ui.themes folder of the HTML5 Video Player [14].

You can remove the kaltura attribution for the player by adding the following javascript:

<script [8] type="text/javascript">mw.setConfig('EmbedPlayer.AttributionButton', false );</script [8]>

Basic Usage

Hosting Your Own Video Transcodes

Using Kaltura's HTML5 Media Library in your own applications is as simple as adding a script include of the library javascript, http://html5.kaltura.org/js [4] and then using the normal html5 video tag, ie <video src="myOgg.ogg">.

Putting it all together your embed page should look something like this:

    <!DOCTYPE html>

    <html [5]>

    <head [6]>

      <script [8] type="text/javascript" src="http://html5.kaltura.org/js" > </script [8]> 

    </head [6]>

    <body [9]>

      <video id="video" style="width:544px;height:304px;" 

        poster="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Elephants_Dream.ogg/seek%3D13-Elephants_Dream.ogg.jpg"

        duration="10:53" 

        linkback="http://www.elephantsdream.org/" >

        <source type="video/ogg" src="http://ia311040.us.archive.org/3/items/ElephantsDream/ed_1024.ogv" >

        <source type="video/h264" src="http://ia311040.us.archive.org/3/items/ElephantsDream/ed_hd_512kb.mp4" >

        <track kind="subtitles" id="video_af" srclang="af" 

             src="media/elephants_dream/elephant.afrikaans.srt"></track>

        <track kind="subtitles" id="video_en" srclang="en"  

             src="media/elephants_dream/elephant.english.srt"></track> 

      </video>

    </body [9]>

    </html [5]>

For best compatibility: we include the poster, durationHint, width and height attributes. This way browsers such as IE can display the player interface with poster image at the correct resolution with a duration in the user interface.
If you would like to support html5 with h.264 ( safari, IE9, google chrome) and support a flash fallback for older versions of IE you include an h.264 source. For best compatibility your mp4 source should ideally use a h.264 profile compatible with mobile devices such as the iPhone. Kaltura hosted Solutions [15] include iPhone support. Desktop video encoding software such as Handbrake [16] also includes iPhone profiles.
If you would like to change the theme you can change the class attribute <video class="kskin">

Common Configuration for SaaS

For common kaltura HTML5 configuration info please see Kaltura HTML5 Configuration [17] on html5video.org

Demonstrations

When viewing on a touchscreen device use two finger scrolling to scroll within the demonstration frame.

You may view these demonstrations full screen by visiting http://kaltura.papyromancer.net/docs/kaltura-demo/

HTML5 Video Player (MIT Licensed)

Please Download the Latest Release from: http://www.kaltura.org/project/HTML5_Video_Player [14]

Notes on Optimization

mwEmbed is designed to be used with a script-loader and this static package sacrifices
transport size and packages in code every client won't use, in order to be a single static file and distribute the playback portions of the HTML5 Media Library as a stand alone HTML5 Video Player under the MIT License.

For full un-minified source see HTML5 Video Player [14]

Basic Usage

In the <head> of your page you will need jQuery and the mwEmbed-player package:

<!-- If your page already includes jQuery you can skip this step -->
<script [8] type="text/javascript" src="kaltura-html5player-widget/jquery-1.4.2.min.js" ></script [8]>
    <!-- Include the css and javascript  -->

    <link [18] rel="stylesheet" href="kaltura-html5player-widget/skins/jquery.ui.themes/jquery-ui-1.7.2.custom.css"></link [18]> 

    <link [18] rel="stylesheet" href="kaltura-html5player-widget/mwEmbed-player-static.css"></link [18]> 

    <script [8] type="text/javascript" src="kaltura-html5player-widget/mwEmbed-player-static.js"></script [8]>

Now in your HTML you can use the video tag and it will be given a user interface ie:

    <video poster="myPoster.jpg" style="width:400px;height:300px" durationHint="32.2" >

      <source src="myH.264.mp4" />

      <source src="myOgg.ogg" />

    </video>

Switching to CDN distributed Javascript

To use the load optimized HTML5 Media Library [19] replace your mwEmbed script include line of <head> with:

<script [8] type="text/javascript" src="http://html5.kaltura.org/js" ></script [8]>

Library Features

Video Player [20]
Audio Player [21]
Cross browser & Format compatibility
- Will work on all major browsers, and with any online supported video format.
- Gracefully identifys the best playback engine (Native HTML5, Flash, VLC or Java Cortado) for your settings and video format.
Easy to skin see live demo [13]
- Based on HTML, CSS and jQuery, skinning is amazingly easy and flexible. No need external or compiled resources (like Flash), or complicated development environments.
- Skin and Theme are consistent through all UI and playback engines. Built in support for for the jquery Theme Roller for easy theming.
Easy to Extend, Javascript modules - Quick, clean and easy way of extending. Write once and the code will be compatible with all browsers and all playback engines.
Javascript libraries for web applications that allow much more then simple playback. Create a full featured web-video experience i
- Import and upload wizard [22]
- Video Editor [23]
- Client Side Encoding (FireOgg) [24]
Easy to integrate - Integrate to any existing web CMS, pre-integrated into Media Wiki (powering Wikipedia, MetaVid).
Kaltura's HTML5 Media Library is built on jQuery [25] and jQueryUI [26] so it's easy to theme, customize and extend.
supports the royalty free, patent unencumbered open media formats ogg theora/vorbis [27].
- This enables websites to distribute video without future content distribution costs [28] associated with the h.264 codec. With theora sporting similar qualities [29] at web bitrates its a win win to start adoption ogg!
- If your already distributing h.264 formats, mwEmbed supports a smooth transition with fallback to h.264 sources with the same html/css interface player skin as the ogg content.
supports emerging subtitles and timed text formats for future prof accessibility.
includes an easy to integrate free license asset search system for grabbing free content from repositories such as the Internet Archive [30], Wikimedia Commons [31], and Flickr [32]. This lets you integrate quick access to freely reusable illustrative image or short web clip for your web app.
includes components for flexible client side transcoding of assets via the Firefogg [33] browser extension. Firefogg integration lets video sites avoid intermediary transcode formats for user contributed media, distribute transcode costs, and lets the website provide specific transcoding settings directly to the client at the point of upload.
Integrated into Kaltura Video Platform based on the Kaltura JS Client library
- Kaltura Analytics Support
- Kaltura Advertisement Support

Supported Platforms Matrix

Method used for testing

Opening the example from http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library [19] -> Using Kaltura SaaS for Video Transcoding section using OS and web browser pointed out for each row of the Supported Platforms Matrix.

<!DOCTYPE html>

<html [5]>

<head [6]>

  <script [8] type="text/javascript" src="http://html5.kaltura.org/js" > </script [8]> 

</head [6]>

<body [9]>

  <video kentryid="0_swup5zao"

    kwidgetid="_243342"></video>

</body [9]>

</html [5]>

OS	Web Browser	Result	Reported issue:	Diagnostic/Workaround
Ubuntu 10.10 Maverick	Google Chrome 12.0.742.124	It works.
Ubuntu 10.10 Maverick	Firefox 3.6.18	Does not work. Poster shows but clicking play button does not render the video.	http://www.kaltura.org/video-does-not-play-ff3618-ubuntu-1010-maverick-meerkat-box [34]	Firefox 3.6.18 do not support the version of ogg file that kaltura is encoding. Not known workaround.
Ubuntu 8.04 - Hardy Heron	Google Chrome 8.0.552.237	It works.
Ubuntu 8.04 - Hardy Heron	Firefox 3.0.3	Does not work. JS console error: targetId is not defined
Win XP	Firefox 3.0.9	It works.
Win XP	Firefox 3.6.13	]Does not work. Poster shows but clicking play button does not render the video.
Nokia N900 Maemo 5	Maemo 5 browser	Does not work. Poster shows but clicking play button does not render the video.

Troubleshooting

Video Codecs

You will need to encode your video files into multiple codec formats to provide video for device platforms like iPhone, iPad, Android, and Blackberry. Dive into HTML5 [35] provides an excellent reference for encoding these multiple video formats with Firefogg [33] , FFmpeg, and Handbrake.

If you would prefer to not have to deal with encoding your videos into multiple formats, you should obtain a trial account with Kaltura [15] and request a support technician setup your account to provide html5 flavored video codecs.

HTML5 video MIME type

Note that if the MIME types for Theora video are not set on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).

You can fix this problem for the Apache Web Server by adding the extension used by Theora video files (“.ogm”, “.ogv”, or “.ogg” are the common types) to the MIME type “video/ogg” via the “mime.types” file:

Edit the mime.types apache configuration file (in “/etc/apache” on linux, “\xampp\apache\conf\mime.types” on windows-xampp)
Search for application/ogg ogg (if not exist skip this step), delete this line
Add the following: video/ogg ogg ogm ogv
Restart apache

Or by adding the “AddType” configuration directive in httpd.conf -

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs. Background

This project started as a part of the MediaWiki HTML5 media functionality project. mwEmbed is another name by which Kaltura’s HTML5 Media Library is known at Wikimedia, where it provides Wikipedia’s upcoming video editing functionality.

mwEmbed provides the basis for other MediaWiki media functionality. For more info see the projects overview on MediaWiki [36] and the associated integration (currently called js2 [37])

Become a Developer

If you find this software useful, stop by #kaltura in FreeNode.

Get Project Source Code

MwEmbed is released under the GPL2 and hosted by the wikimedia foundation.
You may check out a read-only working copy anonymously over HTTP:
svn checkout http://www.kaltura.org/kalorg/html5video/trunk/mwEmbed/ [38]
If you'd like commit access, please submit a request to join this project. [39].

Compile Developer Docs

To compile the development documentation you will need to install jsdoc-toolkit [40]

using the following command will place the documentation in a subfolder of your working directory called jsdoc

java -jar <jsdoc-toolkit path>/jsrun.jar <jsdoc-toolkit path>app/run.js -t=<full jsdoc-toolkit path>/templates/jsdoc/ mwEmbed.js loader.js mwEmbedLoader.js ./modules/**/*/*.js

the documentation may be concatenated to build the README files for both the MIT licensed media player and the gpl licensed media library.

cat overview.markdown features.markdown basic_usage.markdown advanced_examples.markdown mit.markdown troubleshooting.markdown showcase.markdown license.markdown > README
cat overview.markdown features.markdown basic_usage.markdown mit.markdown troubleshooting.markdown showcase.markdown > README.mit

READMEs and individual pages may be converted to html using your favorite markdown to html converter:

bluecloth README > docs/README.html

Additional Resources

For an overview of all mwEmbed files see: http://www.mediawiki.org/wiki/MwEmbed [41]

For stand alone usage see http://kaltura.org/project/HTML5_Media_JavaScript_Library [42]