In this guide, you will learn about the parameters related to the interface and styling that you can customize using the Storm Player configuration object.
Loading player...
Interface Configuration
The interface object controls the behavior of the player's user interface elements.
Parameter name
Parameter type
Required
Default
Description
interface:showTimeline
boolean
no
false
If set to "true", the player will display a progress bar. This function should be enabled for DVR options.
interface:showBigPlayBTN
boolean
no
true
Determines whether a large "Play" button should be displayed at the center of the screen on the player.
interface:autoGUIHide
boolean
no
true
Determines whenever the player interface should disappear in case of no user interaction.
interface:autoGUIHideTime
number
no
3
The number of seconds after which the player interface disappears in case of no user interaction.
interface:nativeMobileGUI
boolean
no
true
If set to "true", the player will use the native mobile GUI on mobile devices.
Style Configuration
The style object allows you to customize the visual appearance of the player.
General Styles
Parameter name
Parameter type
Required
Default
Description
loaderColor
string
no
#ffffff
Default color for the loader.
backgroundColor
string
no
#000000
The background color of the player.
borderRadius
string
no
10px
The border radius size of the player.
Progress Bar
Parameter name
Parameter type
Required
Default
Description
progressBar:gradientColor1
string
no
#ff915a
The first color of the progress bar gradient.
progressBar:gradientColor2
string
no
#ff785a
The second color of the progress bar gradient.
Cue Points
Parameter name
Parameter type
Required
Default
Description
cuePoint:gradientColor1
string
no
#ff915a
The first color of the cue point gradient.
cuePoint:gradientColor2
string
no
#ff785a
The second color of the cue point gradient.
Unmute Label
Parameter name
Parameter type
Required
Default
Description
unmuteLabel:backgroundColor
string
no
#ffffff
The background color of the side bar indicating the need to unmute the volume.
unmuteLabel:primaryColor
string
no
#000000
The color of the text and icon on the side bar indicating the need to unmute the volume.
Icons
Parameter name
Parameter type
Required
Default
Description
icons:primaryColor
string
no
#ffffff
The main color for interface icons.
icons:secondaryColor
string
no
#000000
The second additional color for interface icons.
icons:activeColor
string
no
#ff915a
The color for active elements, such as on mouse hover.
icons:errorColor
string
no
#df0f33
The color for icons indicating an error.
Text
Parameter name
Parameter type
Required
Default
Description
text:titleColor
string
no
#ffffff
The color of the stream title.
text:subtitleColor
string
no
#ffffff
The color of the stream subtitle.
text:errorColor
string
no
#ffffff
The color of the text indicating an error.
Waiting Room Rings
Parameter name
Parameter type
Required
Default
Description
waitingRoomRings:gradientColor1
string
no
#ff915a
The first color of the rings gradient.
waitingRoomRings:gradientColor2
string
no
#ff785a
The second color of the rings gradient.
Watermark
Parameter name
Parameter type
Required
Default
Description
watermark:imgURL
string
no
-
The address to the PNG/JPG/GIF file with the watermark.
watermark:position
string
no
bottom_right
The position where the watermark should appear. Possible values are "bottom_right" and "bottom_left".
Next Step
For the next step please check our Storm JS Player UI - Translations guide where you'll learn how to customize your player messages.
