How to communicate the skinned html and js file

Community Forums Kaltura Players and Player Plugins
1

Hi All,

I have question in player custom skinning html and js file.
Info
From one of the kaltura source ( https://vpaas.kaltura.com/documentation/Web-Video-Player/Player-Customization.html ) I got to know including custom html is using the template path.
I have provided like below in my angular application.
infoScreen:{
‘templatePath’:‘http://localhost:4200/assets/images/player/test.tpl.html’
},
kaltura is showing up this template when i click on the “i” icon.

My requirement
Where can I set the js file respective to this test.tpl.html?
How do I communicate the events raised in this test.tpl.html to js file?
can you please send me some examples on it.

-Ravikiran

2

Hi @Ravikiran,

The template file is relative to the plugin, and enables customizing the look and feel.
However, if you require setting new logic which is not part of the plugin itself, you’ll need to write your won plugin.

If you are able to share more details I might be able to give more precise answer.

Thanks,

Oren M.

3

Hi Oren,

Thank you for the reply,
I got the custom look and feel, I have some links in the custom look and feel where I need the interaction with javascript file to execute some logic. For example in the custom html I have a button, when this button clicked I want to execute some logic in js file, how do I do that?
I want to make the custom html and javascript file interactive to events and data.

Thanks
Ravikiran

4

You can extend player with your own plugin, see example here: http://player.kaltura.com/docs/ExternalResources
and see instructions here: https://knowledge.kaltura.com/kaltura-player-toolkit-theme-skin-and-plugins-guide under “Adding a New Component to Your Player”

You can write your plugin and host on your domain and tell the player to load it.
In your case, if you wish to extend the info plugin you can inherit from it and extend it.
Note that if you inherit from the info plugin and call your plugin miInfo for example, you’ll need to disable the default info plugin in the flashvars:

info:{ plugin: false}

5

Hi Oren, sorry for the late reply,

I get the below error in console. do I need to import or add any js files to index html?

core.es5.js:1020 ERROR TypeError: window.kWidget.featureConfig is not a function
at mediaplayer.component.ts:320
at ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3924)
at ZoneDelegate.invokeTask (zone.js:423)
at Zone.runTask (zone.js:191)
at ZoneTask.invoke (zone.js:486)
at timer (zone.js:1540)

-Ravikiran

6

Hi All,

I get the below error in console. Do I need to import or add any js files to index html?

core.es5.js:1020 ERROR TypeError: window.kWidget.featureConfig is not a function
at mediaplayer.component.ts:320
at ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3924)
at ZoneDelegate.invokeTask (zone.js:423)
at Zone.runTask (zone.js:191)
at ZoneTask.invoke (zone.js:486)
at timer (zone.js:1540)

where as embed function and addReadyCallback functions are working fine.

-Ravikiran