General Configuration - Storm JavaScript Player

In this guide, you will learn about the basic configuration parameters of the Storm Player. Please remember that this configuration pertains solely to the appearance and behavior of the user interface.

Code Example

                        
/**
 * Standard stream configuration object
 */
const streamConfig = {
    stream: {
        ... // Stream & Server Settings
    },
};

/**
 * Standard player configuration object
 */
const playerConfig = {
    containerID: "container",
    width: "100%",
    height: "100%",
    aspectRatio: "16:9",
    title: "My first broadcast",
    subtitle: "Epic live streaming",
    waitingRoom: {
        ... // Waiting Room Settings
    },
    interface: {
        ... // Interface & Styling Settings
    },
    style: {
        ... // Interface & Styling Settings
    },
    translations: {
        ... // Translations
    }
};

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

Basic Player Configuration Object

The second configuration object of the player, known as playerConfig, defines the appearance and behavior of the user interface of the player itself. Basic fields, for example, allow for defining its size, while various sub-objects also define aspects like styles and translations. However, we will now focus on the basic settings.

Code Example:

                        
const playerConfig = {
    containerID: "container",
    width: 640,
    height: 360,
    title: "Awesome live stream",
    subtitle: "This is going to be epic!",
};
                    

The above code represents only the basic parameters of the player.

Explanation and Description of Individual Fields

Parameter name Parameter type Required Default Description
containerID string yes - The ID of a container where the player will be added.
width number | string yes 100% Player width. It can be provided as a number (value will be treated as pixel count) or as a string with either “%” at the end (percent value of a parent container) or “px” (pixel value).
height number | string no 100% Player height. It can be provided as a number (value will be treated as pixel count) or as a string with either “%” at the end (percent value of a parent container) or “px” (pixel value).
aspectRatio string no - If provided will modify player width/height according to the provided aspect ratio, e.g. “16:9”, “4:3”.
title string no - Title for the video stream.
subtitle string no - Subtitle for the video stream.
posterURL string no - URL to a poster image, that will be displayed before playback is initialized.
Table 1. Explanation and description of individual fields table.
Next Step

For the next step please check our Storm JavaScript Player - Waiting Room guide where you’ll learn how to enable Waiting Room for your upcoming broadcasts.

Support Needed?

Create a free ticket and our support team will provide you necessary assistance.