Interface & Styling – Storm JavaScript Player

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.

Live Demo Preview

Loader
Progress bar
Cue point
Unmute label
Icons
Background
Text
Waiting room rings
Border radius
Big play button
Timeline
Auto GUI hide
Font family

Live Source Code

                            
/**
 * Standard player configuration object
 */
const playerConfig = {
    containerID: "container",
    width: "100%",
    aspectRatio: "16:9",
    title: "Awesome live stream",
    subtitle: "This is going to be epic!",
    interface: {
        showBigPlayBTN: true,
        showTimeline: false,
        autoGUIHide: true,
        autoGUIHideTime: 3,
        nativeMobileGUI: true
    },
    style: {
        loaderColor: "#ffffff",
        progressBar: {
            gradientColor1: "#ff915a",
            gradientColor2: "#ff785a"
        },
        cuePoint: {
            gradientColor1: "#ff915a",
            gradientColor2: "#ff785a"
        },
        unmuteLabel: {
            backgroundColor: "#ffffff",
            primaryColor: "#000000"
        },
        icons: {
            primaryColor: "#ffffff",
            secondaryColor: "#000000",
            activeColor: "#ff915a",
            errorColor: "#df0f33"
        },
        backgroundColor: "#000000",
        text: {
            titleColor: "#ffffff",
            subtitleColor: "#ffffff",
            errorColor: "#ffffff"
        },
        waitingRoomRings: {
            gradientColor1: "#ff915a",
            gradientColor2: "#ff785a"
        },
        borderRadius: "10px",
        watermark: {
            imgURL: "image_url.jpg",
            position: "bottom_right"
        }
    }
};

/**
* Each player instance must be provided with both player (gui) and library configs
*/
const storm = stormPlayer(playerConfig, streamConfig);
                        

Explanation and description of individual fields

Parameter nameParameter typeRequiredDefaultDescription
interface:showTimelinebooleannofalseIf set to "true," the player will display a progress bar. This function should be enabled for DVR options.
interface:showBigPlayBTNbooleannotrueDetermines whether a large "Play" button should be displayed at the center of the screen on the player.
interface:autoGUIHidebooleannotrueDetermines whenever the player interface should disappear in case of no user interaction.
interface:autoGUIHideTimenumberno3The number of seconds after which the player interface disappears in case of no user interaction.
loaderColorstringno#ffffffDefault color for the loader.
progressBar:gradientColor1stringno#ff915aThe first color of the progress bar gradient.
progressBar:gradientColor2stringno#ff785aThe second color of the progress bar gradient.
progressBar:cuePoint1stringno#ff915aThe first color of the cue point gradient.
progressBar:cuePoint2stringno#ff785aThe second color of the cue point gradient.
unmuteLabel:backgroundColorstringno#ffffffThe background color of the side bar indicating the need to unmute the volume.
unmuteLabel:primaryColorstringno#000000The color of the text and icon on the side bar indicating the need to unmute the volume.
icons:primaryColorstringno#ffffffThe main color for interface icons.
icons:secondaryColorstringno#000000The second additional color for interface icons.
icons:activeColorstringno#ff915aThe color for active elements, such as on mouse hover.
icons:errorColorstringno#df0f33The color for icons indicating an error.
backgroundColorstringno#000000The background color of the player.
waitingRoomRings:gradientColor1stringno#ff915aThe first color of the rings gradient.
waitingRoomRings:gradientColor2stringno#ff785aThe second color of the rings gradient.
text:titleColorstringno#ffffffThe color of the stream title.
text:subtitleColorstringno#ffffffThe color of the stream subtitle.
text:errorColorstringno#ffffffThe color of the text indicating an error.
borderRadiusstringno10pxThe border radius size of the player.
watermark:imgURLstringno-The address to the PNG/JPG/GIF file with the watermark.
watermark:positionstringnobottom_rightThe position where the watermark should appear. Possible values are "bottom_right" and "bottom_left".
Table 1. explanation and description of individual fields table