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

HTML5 Player fails to initiate: "Cannot read property 'properties' of undefined"

Hi,

The HTML5 player is failing with the error "Cannot read property 'properties' of undefined" when we initialise it (using the setup function). What does this error mean and how to we go about finding the problem?

If we force the primary player to Flash it works correctly, however we really want to use HTML5 to avoid issues with the Flash plugin crashing (which we've seen from time to time).

You can see an example:
- Go to http://cep.eduxy.net/en/login
- Login with username=nuevo / password=12345678
- Ignore any errors and go directly here: http://cep.eduxy.net/en/wizard/nuevo/jwplayer
- Click the "Structure" tab label to close it and see the video

The first video is set to use Flash as the primary player, it's initialised with the following code:
jwplayer('20d94d792641db7193daa6d99d2c1305').setup({
primary: "flash",
file: "https://d2teusukjr0lvl.cloudfront.net/eduxy_admin/video/A123.mp4",
width: "43%",
height: "57%"
});

The second is not set to use Flash as the primary, so it should use HTML5 on a modern browser (I've tested in the latest version of Chrome):
jwplayer('6c24a6c514ba2189894e43c6a83c5905').setup({
file: "https://d2teusukjr0lvl.cloudfront.net/eduxy_admin/video/A123.mp4",
width: "43%",
height: "57%"
});


Many thanks!

14 Community Answers

Up Down

MisterNeutron

User  
0 rated :

You can't use percentages for both width and height. You must specify either fixed pixels for width and height:

width: 640,
height: 360

Or specify the width as 100% and use an aspectratio:

width: "100%",
aspectratio: "16:9"

For responsive design (using aspectratio), wrap the player <div> in an outer <div>, and apply your percentage sizing to that outer <div>.

Please see the configuration guide:

http://support.jwplayer.com/customer/portal/articles/1413113-configuration-options-reference

Up Down

adam

User  
0 rated :

Thanks. I've changed them as you suggested, but I still have the same problem.

Now the setup functions are:

jwplayer('20d94d792641db7193daa6d99d2c1305').setup({
primary: "flash",
file: "https://d2teusukjr0lvl.cloudfront.net/eduxy_admin/video/A123.mp4",
width: 640,
height: 360
});

and

jwplayer('6c24a6c514ba2189894e43c6a83c5905').setup({
file: "https://d2teusukjr0lvl.cloudfront.net/eduxy_admin/video/A123.mp4",
width: 640,
height: 360
});

How can I debug this?

Up Down

adam

User  
0 rated :

I found a bug in another part of our system which produced the error message above - I'm not sure why this message was displayed in the JWPlayer div - but I've fixed it anyway.

Now the HTML5 JWPlayer is invisible after initialisation. It produces an empty div as follows:
<div class="jwplayer playlist-none" id="6c24a6c514ba2189894e43c6a83c5905" tabindex="0" style="width: 640px; height: 360px; background-color: rgb(0, 0, 0);"></div>

I see no error in the console and the Flash player continues working correctly.

You can see all of this in the example I posted originally.

Do you know why the HTML5 player isn't initialising correctly?

Up Down

MisterNeutron

User  
0 rated :

Sorry, but I can't get to a page that actually has the JW Player setup() code on it.

Please set up a simple test page, without requiring a login, and without the mountain of other stuff you have on there - just a basic HTML page with a div where you want to play a video, and the JW setup code to make it happen.

Up Down

MisterNeutron

User  
0 rated :

And BTW, I'm not having any trouble viewing that video. It's in Flash mode, however. But without being able to dig into the setup code, I don't know why.

I can't even do much cross-browser testing, because I'd have to go through logins, errors, etc., just to get to the page. That's no way to debug a problem.

Up Down

adam

User  
0 rated :

I've tried a really simple example and it works ok: http://jsfiddle.net/adamf321/8y9jz7qe/

So it looks like some sort of conflict with our code. But with no error message I really don't know how to start looking for the problem.

Is there some way I can get more debug info from jwplayer?

Up Down

MisterNeutron

User  
0 rated :

I think you're coming at this from the wrong direction. Start with most of your other stuff commented out. Start adding it back in until you hit the error condition. JW Player can't magically figure out why some external script is killing the variables it requires.

And why is your fiddle triggering HTML5 mode, but your "live" page is triggering Flash mode? That points to some very fundamental difference in the setup.

Up Down

Cooper Reid

JW Player Support Agent  
0 rated :

I see you’re targeting the div using an id that begins with a number:

jwplayer(‘20d94d792641db7193daa6d99d2c1305’).setup({
primary: “flash”,
file: “https://d2teusukjr0lvl.cloudfront.net/eduxy_admin/video/A123.mp4”,
width: 640,
height: 360
});

An id must begin with a letter to work properly. This is a JavaScript fundamental. This should fix the issue:

jwplayer(‘player-23443r3t534t’).setup(

Best Regards,
Cooper

Up Down

adam

User  
0 rated :

@MisterNeutron: The live page triggers both a Flash and an HTML5 player. Just the HTML5 one is invisible because it gets created as an empty div.

@Cooper: I already saw this issue and changed it, but it didn't help.

Up Down

jherrieven

User  
0 rated :

Indeed, I was just about to point out the same thing - with one exception - it's not a JavaScript fundamental, its a CSS fundamental.

This is why it is working in flash (because the styling is encapsulated) but not in HTML mode.

James Herrieven

Up Down

jherrieven

User  
0 rated :

@adam

If you want a simple test, take your JS Fiddle and change the target DIV id to "123" and try to load your JW Player using

jwplayer("123").setup(...)

James

Up Down

Cooper Reid

JW Player Support Agent  
0 rated :

James,
My mistake: it is a CSS fundamental, not a JavaScript fundamental.
-Cooper

Up Down

adam

User  
0 rated :

The problem was caused by a global object called Image which must have caused a conflict with jwplayer.

Thanks for your help everyone.

Up Down

Cooper Reid

JW Player Support Agent  
0 rated :

Good find!
Cooper

This question has received the maximum number of answers.