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

jwplayer("container") returns an object with the function registerPlugin


I am building a simple application where I am looking to instantiate a jwplayer.

When I say

this.container = document.createElement("div");
this.container.id = "meh";
this.appendChild(this.container);

this.player = jwplayer("meh");
this.player.setup({file:blah}); //setup is undefined
console.log(this.player); //object { registerPlugin: function (a, b, f, g) }

Can anyone point me in the right direction?

This is exactly related to this http://support.jwplayer.com/customer/portal/questions/8145655-why-does-jwplayer-have-registerplugin-function-only-

Claims that:

"Okay I figure it out. When you first load the jwplayer javascript the only property it has is registerPlugin, but once you initialize it you can see the other properties.. my mistake."

So I guess.... when does initialization occur? None of the examples appear to initialize.

7 Community Answers

Up Down

clark

User  
0 rated :

I think it is because the container to which JWPlayer is added is not yet on the DOM although that causes me a deeper issue of structure to think about.

Up Down

clark

User  
0 rated :

Can anyone confirm if it is possible to pass in an element rather than a string ID of an existing element?

I am giving container an ID so that JWPlayer can find the container, but it seems superfluous.

I passed in the container as an element and it kind of works, but I get a bunch of errors so I am not sure if passing an element is a good thing or this is related to something else.

There was an error calling back an event handler for "resize". Error: Failed to execute 'querySelector' on 'Document': '# .jw-overlays' is not a valid selector.

jwplayer.js:1 There was an error calling back an event handler for "ready". Error: Failed to execute 'querySelector' on 'Document': '# .jw-overlays' is not a valid selector.

Up Down

clark N/A

User  
0 rated :

It is a pity I cannot edit or delete! Sorry for the on going spam.

So I simplified my test. It is basically an empty index page with an init method onload.

//reference an existing container on the page body.
var container = document.getElementById("existing-container");

//create a new div called playerContainer with the same ID
var playerContainer = document.createElement("div");
playerContainer.id = "playerContainer";

//create a player instance
var player = jwplayer("playerContainer");

//This returns an object with registerPlugin
console.log(player);

//Here, I am adding the player container to the dom and this //is where my problems start. The fact that it comes after.
container.appendChild(playerContainer);


If I was to reverse the last 2 lines above. It is fine. It works as expected. However, because I am in a nested structure, Lets say that the player belongs in nested Div E of A>B>C>D>E

D is creating E then adding E to the DOM. So the player in my app will always suffer the above.

So!

I decided instead to to use a direct reference to an element.


//create a new div called playerContainer with the same ID
var playerContainer = document.createElement("div");

//create a player instance
var player = jwplayer(playerContainer);

//This returns a JWPlayer instance
console.log(player);

This works at first, but not really because I eventually get a series of warnings.

"There was an error calling back an event handler for "resize". Error: Failed to execute 'querySelector' on 'Document': '# .jw-overlays' is not a valid selector."

Recreating the player causes a Runtime error about something or other being null. (I am not surprised as it appears I am abusing it).


Is there any way to use the JWPlayer as I want to? Any way to add the player, and then assign an event listener of some kind for when it initializes? Or am I forced to ensure that the DOM structure is fully in place BEFORE instantiating jwplayer?

Thanks!

Up Down

clark N/A

User  
0 rated :


Because the container element of jwplayer is not yet on the DOMTree at the point of creation. I added a setTimeOut of 100 to create the player. This works.

However, that has me worried about the details of that being stable. Maybe an ipad1 takes 140ms to add the DOM or maybe it is accurate because the thread is blocked so I can guarentee a 100ms delay. Honestly, I have no idea of what is going on there internally.

So I do not like it.

I am next thinking about passing the parent to all display containers.

var screen = new Screen(container);

In this world, every element is born into the DOMTree on creation and therefor JWPlayer will find its container.

I just worry about performance of reflows given the structure above. A will reflow all the way down the chain instead of once at the top.

Up Down

clark N/A

User  
0 rated :

Is it feasible (or makes sense) to make an issue for a feature request on github?

jwplayer( string | HTMLElement);

I know the HTMLElement works (ish) but it appears there are references to the ID elsewhere. If passing an HTMLElement in, maybe it could store the ID of this element as the string, or if empty, assign some uuid to the container and reference that. It would tie into the existing selector system OK.

But honestly, I may be well off track with my intended usage.

Up Down

Randy

JW Player Support Agent  
1 rated :

Hello Clark,

Thank you for your interest in JW Player and compiling your own code. Although we cannot really help with implementing your custom code, I believe you might be on the right track as sometimes the player does need to successfully setup/instantiate before additional methods/events can be called. You could also maybe use the onReady() event to check that the player is ready for the next steps in your code. If you haven already looked into it, you may want to check out our JS API which has a few helpful pointers for tapping into some of the more robust features under the hood: http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference .

Randy

Up Down

clark

User  
0 rated :

Thanks Randy,

I am going to try again today with this.

The real problem it seems to me is that JWPlayer is using "ID Lookups" for everything.

I have to say

"hey JWPlayer, go and find a ID div and inject yourself into it".

and when I dispose it it seems to say

"I will use that ID to go and find a ID div and remove it".

At both of these points, the actual ID it is trying to find will never be found because at both these points, the container is off the tree.

Basically, I want to say "Hey JWPlayer, here is the container you need, no need to ID anything, consider it found".



This question has received the maximum number of answers.