I've encountered a strange issue with jwplayer.
I'm setting it up from an Angular JS Controller and loading it using a simple preview button that loads the jwplayer with the specified configuration.
It should be straightforward.
jwplayer(id).setup(config);
I have configured a skin with various colors (active, inactive, background).
The problem arises when I click the preview button. Sometimes the player loads with the correct colors, and other times it defaults to the default skin colors.
All other properties of jwplayer load correctly. Changing the skin model consistently displays that model but still encounters issues with the colors.
I checked the loaded configuration in both scenarios using
jwplayer(attribute_id).getConfig()How is it possible for the jwplayer to have the skin colors loaded but not display correctly?
Skin-related configurations obtained from the JavaScript API:
skin: "seven"
skinColorActive: "#FFFFFF"
skinColorBackground: "#3B0239"
skinColorInactive: "#EE2A7B"
skinUrl: undefined
The version of the player I'm using is 7.4.3
UPDATE
I found the solution to the problem. I was using a function to randomly generate alphanumeric IDs for jwplayer. This caused some instances to start with a number, leading to the color issues.
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 (".").
Although the jQuery selector was incorrect, only the colors were affected, while the rest of the setup worked fine.
Possibly, the CSS couldn't interpret the incorrect ID selector, hence the color discrepancy...