HTML5 Video Player

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.
You can learn more about using mwEmbed with a script-loader on the project home page.

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

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

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 type="text/javascript" src="kaltura-html5player-widget/jquery-1.4.2.min.js" ></script>

    <!-- Include the css and javascript  -->
    <link rel="stylesheet" href="kaltura-html5player-widget/skins/jquery.ui.themes/jquery-ui-1.7.2.custom.css"></link>
    <link rel="stylesheet" href="kaltura-html5player-widget/mwEmbed-player-static.css"></link>
    <script type="text/javascript" src="kaltura-html5player-widget/mwEmbed-player-static.js"></script>

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>

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. The library will automatically replace your Flash embed with an html5 <video> element on browsers capable of parsing the tag.

    <!DOCTYPE html>
    <html>
    <head>
      <title>Fall forward from Flash to html5</title>
      <script type="text/javascript" src="http://html5.kaltura.org/js"></script>
    </head>
    <body>
      <h2>Fall forward from Flash to html5</h2>
      <object 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 name="allowFullScreen" value="true" />
        <param name="allowNetworking" value="all" />
        <param name="allowScriptAccess" value="always" />
        <param name="bgcolor" value="#000000" />
        <param name="flashVars" value="&" />
        <param name="movie" value="http://www.kaltura.com/index.php/kwidget/cache_st/1274763304/wid/_243342/uiconf_id/48501/entry_id/0_swup5zao" />
      </object>
    </body>
    </html>

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. 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. 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.

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

<script type="text/javascript">mw.setConfig('EmbedPlayer.kalturaAttribution', false );</script>

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

<script type="text/javascript">mw.setConfig('EmbedPlayer.kalturaAttribution', false );</script>

Downloads and Links

About Project

Author: papyromancer

License: MIT License

Join