Show search and navigation.

 

Kaltura Plugin Integration

The Uplynk OSMF player/Flash SDK has been deprecated. It is recommended that all customers transition to the Uplynk HTML5 AdaptivePlayer.

This document will guide you through integrating the Uplynk Kaltura Plugin into a default Kaltura Dynamic Player 3.0 (KDP3) project.

Required Software

The software you'll need for this project is listed below:

Building KDP (Kaltura Dynamic Player) 3.0

We consider the actual building of KDP3 outside the scope of our support, however we would direct you to the following resource which helped us build the player:

Compiling Uplynk Kaltura Plugin

Details on creating a plugin can be found on Kaltura's "How to create KDP plugins" page. Once when you have your plugin project created there are two main files you'll need to create.

UplynkKalturaPlugin.as:

package
{
	import com.kaltura.kdpfl.plugin.IPlugin;
	import com.kaltura.kdpfl.plugin.IPluginFactory;

	import flash.display.Sprite;
	import flash.system.Security;

	public class UplynkKalturaPlugin extends Sprite implements IPluginFactory
	{
		public function UplynkKalturaPlugin()
		{
			Security.allowDomain("*");
		}

		public function create (pluginName : String =null) : IPlugin
		{
			return new KalturaPluginCode();
		}
	}

}

KalturaPluginCode.as:

package
{

	import com.kaltura.kdpfl.model.MediaProxy;
	import com.kaltura.kdpfl.plugin.IPlugin;
	import com.kaltura.kdpfl.plugin.KPluginEvent;

	import fl.core.UIComponent;

	import org.osmf.events.MediaFactoryEvent;
	import org.osmf.media.DefaultMediaFactory;
	import org.osmf.media.MediaElement;
	import org.osmf.media.URLResource;

	import org.puremvc.as3.interfaces.IFacade;

	public class KalturaPluginCode extends UIComponent implements IPlugin
	{
		protected var _localMediaFactory : DefaultMediaFactory;

		private var mediaElement:MediaElement;

		public function initializePlugin(facade:IFacade):void
		{
			_localMediaFactory = (facade.retrieveProxy(MediaProxy.NAME) as MediaProxy).vo.mediaFactory;
			_localMediaFactory.addEventListener(MediaFactoryEvent.MEDIA_ELEMENT_CREATE, onCreateMedia)
			_localMediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD, onPluginLoad);
			_localMediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD_ERROR, onPluginLoadError);

			var resource:URLResource = new URLResource('http://storage.uplynk.com/client/latest_upLynkOsmfPlugin.swf');
			_localMediaFactory.loadPlugin( resource );
		}

		public function setSkin(styleName:String, setSkinSize:Boolean=false):void
		{
		}

		private function onPluginLoad(e:MediaFactoryEvent):void
		{
			dispatchEvent( new KPluginEvent (KPluginEvent.KPLUGIN_INIT_COMPLETE) );
		}

		private function onPluginLoadError(e:MediaFactoryEvent):void
		{
			dispatchEvent( new KPluginEvent (KPluginEvent.KPLUGIN_INIT_FAILED) );
		}


		private function onCreateMedia(e:MediaFactoryEvent):void
		{
			if(getQualifiedClassName(e.mediaElement) == "com.uplynk.osmf.media::UplynkElement")
			{
				mediaElement = e.mediaElement;
				// Any initialization code required. example for setting up captions.
			}
		}

	}
}

Including the Uplynk Kaltura Plugin

After you have finished compiling your plugin to UplynkKalturaPlugin.swf. Copy this file to your project directory's html-template/plugins folder. Rebuild KDP3 to ensure itis placed in the bin-debug/plugins folder as part of your build.

Next we'll be editing the default config.xml file to include the plugin in the player we built. The build products for your KDP3 build are placed, along with additional files in the bin-debug folder. Expand this folder in Flash Builder and click to edit config.xml. You will be warned that the file is derived, but ignore this warning and pull up the file. The view defaults to the design pane. Click the tab that says "Source".

Find the VBox tag with the id "player". Immediately after this tag include the following code:

Add plugin tag:

<Plugin id="UplynkKaltura" width="0%" height="0%" includeInLayout="false" />

Save and close this file.

Next you'll need your favorite text editor. Using finder or the document open facility of your editor find the file "{path_to_my_kdp3_proj}/bin-debug/ci_html-template.html"

Open the file and find the term "sourceType". It is going to be a part of a long concatenated string that is a parameter passed to the function "AC_FL_RunContent". Modify this string so it says "sourceType=url".

Remember to save the file!

Almost finished. Now just below "sourceType" a few lines is the "entryId" term. This is where we provide our Uplynk content URL. You'll want to provide your own URL, or use our testing url. Modify this entry so it reads:

&entryId=https://content.uplynk.com/37d6fd87f71141dbb1638e1cdf4ea93f.m3u8

Ensure you leave all the other syntax/punctuation intact.

Testing Playback

Return to your KDP3 Flash Builder and find your newly edited html file at:

bin-debug/ci_html-template.html

Double click this file and your html page should load a player. Click the play button and enjoy your content in KDP3.

Troubleshooting

As the versions in Kaltura's instructions are somewhat antiquated, you may run into some possible issues with your KDP3 build. Here are a few that we've seen so far.