Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Does JWplayer support javascript plugins?


Hi guys,

I've got a very simple js plugin there basically come from helloworld.js in jwplugin sdk.

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video Test Page</title>

<script src="http://jwpsrv.com/library/your key"></script>


</head>
<body class="page-empty cms-page-view cms-on-demand-test">
<div>
<div class="std">
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
file: 'your file',
width: '940',
height: '529',
controlbar: 'bottom',
plugins: {
'helloworld.js': {
text: "helloworld"
}
},

});

jwplayer().onBeforePlay(function() {

});



</script>

</div>
</div>

<button type="button" onclick="alert(jwplayer().getPlugin('helloworld').showalert())">click me</button>

</body>
</html>

----------------------------------------------------------------------------------------
hello world.js:

(function(jwplayer){

var template = function(player, config, div) {
function setup(evt) {
div.style.color = 'white';
div.innerHTML = config.text;
};
player.onReady(setup);
this.resize = function(width, height) {};
};
function showalert(){
alert("alert alert!!!");
}
jwplayer().registerPlugin('helloworld','',template);

})(jwplayer);
----------------------------------------------------------

The text can be displayed on the top of the player successfully, when i hit the button, the alert is never show up, and it keep showing me 'undefined function' error.

I'm a web starter, can someone give me some help about it?

Regards,

Jasen

12 Community Answers

jherrieven

Best Answer 

Or... try this - it demonstrates 3 basic elements of plugin development:

1) Event binding of a function to the player (onReady)
2) A private function (setup) which can still be called provided the request came from within the plugin closure
3) A public method which can be accessed from outside of the plugin

----------------------------------------------------------
(function(jwplayer){
var template = function(player, config, div) {

player.onReady(function(){
setup();
});

function setup(evt) {
div.style.color = 'white';
div.innerHTML = config.text;
};

this.showalert = function(){
alert("alert alert!!!");
};
};
jwplayer().registerPlugin('helloworld', '6.0', template);
})(jwplayer);
----------------------------------------------------------

Incidentally your code has mismatched braces which is why it still doesn't work.

James Herrieven

View in conversation

Ethan Feldman

JW Player Support Agent  
0 rated :

If you are using JW6, your registerPlugin call needs to look like this:

jwplayer().registerPlugin(‘helloworld’,‘6.0’,template);

chorry

User  
0 rated :

Thanks Ethan,

yeah, i've done that change, but the call of jwplayer().getPlugin('helloworld').showalert() still not working...

Ethan Feldman

JW Player Support Agent  
0 rated :

Do you have a link?

jherrieven

User  
0 rated :

@Jasen

Your "showalert" function is being declared as a private function within the plugin - you can't therefore access this function directly.

You need to expose the function publicly by declaring it using the following notation:

this.showalert = function(){
...
};

or by wrapping it in a publicly available method.

James Herrieven

chorry

User  
0 rated :

Thanks James,

I just tried ur way, but it was still not working...
it seems like jwplayer can't even find the plugin, it gives me a type error of undefined function when i try to call "jwplayer().getPlugin('helloworld')"...

Regards

Jasen

Ethan Feldman

JW Player Support Agent  
0 rated :

Please put up a link. JS plugins work fine.

jherrieven

Best Answer  User  
0 rated :

Or... try this - it demonstrates 3 basic elements of plugin development:

1) Event binding of a function to the player (onReady)
2) A private function (setup) which can still be called provided the request came from within the plugin closure
3) A public method which can be accessed from outside of the plugin

----------------------------------------------------------
(function(jwplayer){
var template = function(player, config, div) {

player.onReady(function(){
setup();
});

function setup(evt) {
div.style.color = 'white';
div.innerHTML = config.text;
};

this.showalert = function(){
alert("alert alert!!!");
};
};
jwplayer().registerPlugin('helloworld', '6.0', template);
})(jwplayer);
----------------------------------------------------------

Incidentally your code has mismatched braces which is why it still doesn't work.

James Herrieven

chorry

User  
0 rated :

@Ethan

The link is here:

http://ovationchannel.com/jwtext/index.html

Thanks,

Jasen
---------------------------------------------------------------

@James

Thanks for the demonstration.

Correct me if I misunderstood, for any jw plugin, I have to use jw event such as onReady or onPlay. And I can't have my own event to bind with the plugin. In other words, the button is not an jw event, therefore, the function cannot be run.

Regards,

Jasen


jherrieven

User  
1 rated :

@Jasen

So there are two issues still:

1) Sorry i missed this before - "jwplayer().getPlugin('helloworld')" is not a valid way to access the plugin. Try using the following instead:

jwplayer().plugins.helloworld.changeText()

2) You are trying to call the function "changeText()" which doesn't exist in the plugin. Try changing:

this.showalert = ...

to

this.changeText = ...

Now when you click your button you should see the alert.

James

Ethan Feldman

JW Player Support Agent  
1 rated :

Indeed, changeText does not exist in the plugin.

chorry

User  
0 rated :

Sorry guys. I was too careless...

I set up the changeText function in another file...

But jwplayer().plugins.helloworld.changeText() works perfectly fine!!!

Thanks James,
Thanks Ethan.

Ethan Feldman

JW Player Support Agent  
0 rated :

Great :) !

This question has received the maximum number of answers.