Getting Started with Kaltura HTML5

From HTML5 Video
Revision as of 12:02, 15 November 2012 by Mdale (Talk | contribs)

Jump to: navigation, search


Contents

Learn more a about the Kaltura HTML5 player

The Kaltura html5 player is largely tuned to work with the Kaltura platform. You can lean more about how the Kaltura HTML5 player works with the Kaltura platform by visiting the Kaltura player feature hub. There you can read about all the players functionality.

Installing the Javascript Library

The kaltura html5 library can also be on your local site. Here are some options for doing so:

.org CDN Hosted Script Installation

Note: if your a kaltura customer you should use the embed code provided via the KMC. 

The Kaltura HTML5 Video Library may be included either in your web page's <head> or <body> section by including a single line of javascript:

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

Self Hosting the Library

The full, GPL licensed Kaltura HTML5 Video Library may be checked out from the Kaltura source code repository and set up on a PHP enabled web server for fully customisable use.

You can download any given tag from github. From the release notes page you can see what is the most recent changes and tag. And follow the associated download link for example:

download 1.7.0.4

You will want to edit LocalSettings.php A good example of local settings is included in LocalSettings.php.sample You can copy that sample to the LocalSettings.php location in the root of the mwEmbed folder. If your setting up the library for onPrem or CE edition take a look at LocalSettings.KalturaPlatform.php which includes a local settings file that you can point at your CE or onPrem kaltura install to bootstrap the html5 library configuration.

In your local settings file sure your $wgKalturaServiceUrl is set:

$wgKalturaServiceUrl = 'http://url.to.your.kaltura.api.install';

Once you checkout the library assuming it located at some location like: http://example.com/mwEmbed, in your pages that you want to activate the html5 library script you should include:

<script src="http://example.com/mwEmbed/mwEmbedLoader.php"></script>

MIT Licensed Static Player Installation

The MIT Licensed Kaltura HTML5 Media Player is a statically compiled library that you may freely distribute when all code must be hosted directly on the website and linking to the CDN hosted library is not possible.

The most recent version of the MIT Licensed library should be downloaded from kaltura.org. Assuming the script is installed to kaltura-html5player-widget, then, in your document <head>, include the css and javascript:

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

Inserting HTML5 Media Elements onto a Web Page

Once the appropriate Javascript library has been included in the web page, any Media Elements in the page <body> will be replaced with the Kaltura Player:

<video controls poster="./media/sintel.jpg" width="720" height="306">
  <source type="video/mp4" src="./media/sintel.mp4">
  <source type="video/ogg" src="./media/sintel.ogg">
  <track kind="subtitles" srclang="en" src="./media/sintel_en.srt"> 
  <track kind="subtitles" srclang="ru" src="./media/sintel_ru.srt"> 
</video>

becomes: