Kaltura OnPage Plugins

From HTML5 Video

Jump to: navigation, search

This document guides the creation of on page plugins.

Which side of the iframe ?

An overview of onPage vs inside player plugins

The first question you have to ask when developing a plugin is whether you plugin should be on the iframe side or the onPage side. Kaltura OnPage Plugins are loaded for both flash and HTML5 players and only have to be written once. On page plugins are loaded on the same page of the player and they interact with the player with the Kaltura kdp api. Kaltura HTML5 iframe plugins run inside the iframe side of player and have lower level access to the video tag and internal html5 events. Any plugins written as an iframe plugin will have to be written twice once for the html5 player and once for the swf player. Iframe / swf plugins are good for visual plugins, skins, and ads. OnPage plugins are good for anayltics or secondary interaction widgets such as searching transcripts, synced html content ( slides, commentary, etc ). You can see a simple example of both types of resource loading here. ( view source on that page to see the uiConf )

note: if the trade offs are acceptable ( no fullscreen, reduced performance) a chromless flash player is also supported in the html5 library so that you can write you visual plugin in html while still falling back to flash + html for browsers that do not have native video tag support. This is presently not a recommended path, but may be more feasible in the near future.

Getting Started

You will want to take a look at the External Resources plugin. The external resource support outlines how you include javascript resources from your uiConf plugin configuration lines. For on Page plugins we want to look at the onPageJs1 attribute:

<Plugin id="fooBar" width="0%" height="0%" includeInLayout="false" loadingPolicy="onDemand" 
        onPageJs1="myfooOnPagePlugin.js"
/>

This will cause the player to load your on page plugin for both html5 and flash. For optimal performance you should use the kWidget.embed call to ensure your onPage code is loaded before the flash player is written to the page.

As mentioned on the external resources page, you will need to include the following configuration option to load external resources:

mw.setConfig('Kaltura.EnableEmbedUiConfJs', true);

Skeleton OnPage code

(function(){
	// This is a generic onPage plugin you will want to subscribe to the ready event: 
	kWidget.addReadyCallback( function( playerId ){
		var kdp = document.getElementById( playerId );
 
		// Here you can check player configuration ( if needed )
		// in this case we are checking if our plugin is enabled
		// For example you may have one uiConf defined onPage plugin resource
		// but turn off a given plugin on a particular with flashvars:
		// flashvars="&fooBar.plugin=false"
 
		// Also keep in mind you could have multiple players on a page. 
		if( kdp.evaluate( '{fooBar.plugin}' ) ){
			new fooBarOnPage( playerId );
		}
	});
 
	// There are a few conventions for creating javascirpt pseudo classes 
	//  ( feel free use what you like )
	fooBarOnPage = function( playerId ){
		return this.init( playerId );
	};
	fooBarOnPage.prototype = {
		init:function( playerId ){
			this.playerId = playerId;
			this.kdp = document.getElementById( playerId );	
			this.addPlayerBindings();
		},
		addPlayerBindings:function(){
			// you can get flashvar or plugin config via the evaluate calls: 
			var myCustomFlashVar = kdp.evaluate('{configProxy.flashvars.myCustomFlashVar}');
			// add local listeners:
			this.addListener( 'doPlay', this.onPlay );
			// List of supported listeners across html5 and kdp is available here:
			// http://html5video.org/wiki/Kaltura_KDP_API_Compatibility
		},
		onPlay:function(){
			console.log( 'video' + this.playerId + ' playing');
			// you can read the current time with:
			kdp.evaluate('{video.player.currentTime}');
		},
		/**
		* Note as of 1.6.8 or so we will have native support for this boiler
		* plate anonymous listener code built into the kdp object. 
		* ( along with support for jQuery style removing bindings via namespace )
		* 
		* In the mean time you can include something like the following in your class. 
		*/
		addListener:function( bindName, callback ){
			var globalCBName = 'foobar_global_callback_' + bindName + '_' + playerId;
			window[ globalCBName ] = callback;
			kdp.addJsListener( bindName, globalCBName );
		}
	}
})();