Kaltura OnPage Plugins

From HTML5 Video
Jump to: navigation, search


This document guides the creation of on page plugins.

Which side of the player?

An overview of onPage vs inside player plugins

The first question you have to ask when developing a player plugin is whether your plugin should be on loaded inside the player as a native plugin OR on the hosting page side communicating through the kdp and kWidget API.

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 (see Creating KDP3 Flash plugins). In-Player plugins are good for visual plugins, skins, and ads where the plugin needs to control the playback sequence or modify the streaming functionality (e.g. peer 2 peer plugins).

On-Page plugins are good for anayltics or secondary interaction widgets such as searching transcripts, synced html content (slides, commentary, etc). A great example (and blue-print) for On-Page plugins is the Video Details Block On-Page player plugin.

Getting Started - Developing On-Page Plugins

Explore the example 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 must 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 ( notice we postfix fooBarOnPage so its easy to remove just our listeners):
			this.kdp.kBind( 'doPlay.fooBarOnPage', 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:
			this.kdp.evaluate('{video.player.currentTime}');
		}
	}
})();