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 nameParameter typeRequiredDefaultDescription
containerIDstringyes-The ID of a container where the player will be added.
widthnumber | stringyes100%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).
heightnumber | stringno100%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).
aspectRatiostringno-If provided will modify player width/height according to the provided aspect ratio, e.g. “16:9”, “4:3”.
titlestringno-Title for the video stream.
subtitlestringno-Subtitle for the video stream.
posterURLstringno-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.