Interface & Styling – Storm JavaScript Player

                            
/**
 * 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);