External Resources adds support for loading External resources onPage ( for both flash and html5) or within the iframe of the javasciprt html5 player.
The purpose of this document is to detail configuration options for associating external resources with kaltura plugins.
KWidget.addReadyCallback( function( /* @param = playerId of ready player */ ) );
Note: the use of relative links is supported, but its recommended that you use absolute links in case we later develop functionality to package multiple resources in a single request on the serverside without embed context.
Example of onPage vars external resources ( not associated with any plugin )
<var key="onPageJs1" value="externalResources/onPageJs1.js" /> <var key="onPageCss1" value="externalResources/onPageCss1.css" />
HTML5 Iframe resources
To include HTML5 iframe side resources you can use uiVars. Resources included here are “custom plugins” and are functionality equivalent to the loader.js files you see in mwEmbed modules. They can bind to all the player build out events check for the existing of plugins and load more files if needed. The iframe resources can be defined as follows:
<var key="IframeCustomPluginJs1" value="externalResources/IframeCustomPluginJs1.js" /> <var key="IframeCustomPluginJs2" value="externalResources/IframeCustomPluginJs2.js" /> <var key="IframeCustomPluginCss1" value="externalResources/IframeCustomPluginCss1.css" />
HTML5 iframe resource associated with plugin
<Plugin id="fooBar" /*...*/ iframeHTML5Js1="externalResources/iframeHTML5_fooBarPlugin.js" />
Note: If using relative css image paths they should be relative to the page embed location ( not the css file ). Practically you should use absolute urls or base64 embed the assets in the css file.
Note: Mw.CustomResourceIncludes is deprecated for external use. This configuration variable is used internally to structure the delivery of resources to the player, but uiConf includes of scripts should use the iframe or onPage vars to explicitly say the loading mode of the given plugin.
Example xml plugin configuration:
<Plugin id="fooBar" width="0%" height="0%" includeInLayout="false" loadingPolicy="onDemand" onPageJs1="externalResources/onPageCSS1_fooBar.css" onPageCss1="externalResources/onPage_fooBarPlugin.css" iframeHTML5Js1="externalResources/Html5IframePlugin.js" />