angularjsjwplayerjwplayer7

JWPlayer7 not loading the skin colors


I have a weird error with jwplayer.

I configure it from a Angular JS Controller and load it with a simple preview button which loads the jwplayer with the requested conf.

As simple as this.

jwplayer(id).setup(config);

I have a skin and the skin colors (active, inactive, background) configured.

The issue happens when I click the preview button. Sometimes the player loads with the correct colors and sometimes the player loads with the default skin colors.

Every other jwplayer property get loaded correctly. If I change the skin model it will always load that model but will have the same issue with the colors.

I ran a jwplayer(attribute_id).getConfig() to check which conf has been loaded in both cases and they are exactly the same.

So how is it possible the jwplayer has the skin colors loaded but they don't work in some cases?

Skin related conf obtained from the js api:

skin: "seven"
skinColorActive: "#FFFFFF"
skinColorBackground: "#3B0239"
skinColorInactive: "#EE2A7B"
skinUrl: undefined

The player's version I am using is the 7.4.3

UPDATE

I figured out the issue. I have a function to random generate (number and characters) jwplayer id's in case I have a couple of jwplayers in the same page they have different ids.

Every time I generated a new jwplayer it would use a different id. So I noticed the colors weren't working when the jwplayer id was starting with a number.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

So for some reason although the JQuery selector was wrong, just the colors weren't working, the rest of the setup was working fine.

I assume the CSS couldn't work with a wrong id selector and that's why the colors wouldn't show up...


Solution

  • I figured out the issue. I have a function to random generate (number and characters) jwplayer ids in case I have a couple of jwplayers in the same page they have different ids.

    Every time I generated a new jwplayer it would use a different id. So I noticed the colors werent working when the jwplayer id was starting with a number.

    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

    So for some reason although the JQuery selector was wrong, just the colors werent working, the rest of the setup was working fine.

    I assume the CSS couldnt work with a wrong id selector and that's why the colors wouldnt show up...