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 = {
    configurationType: "embedded",
    stream: {
        serverList: [{
            host: "localhost",
            application: "live",
            port: 80,
            ssl: false
        }],
        sourceList: [{
            protocol: "storm",
            streamKey: "test"
        }, ]
    },
};

/**
 * Standard player configuration object
 */
const playerConfig = {
    containerID: "container",
    width: "100%",
    height: "100%",
    aspectRatio: "16:9",
    title: "My first broadcast",
    subtitle: "Epic live streaming",
};

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

Stream Configuration Object

For Storm Player to function correctly, it needs two configuration objects. The first one is an object of the class StormStreamingConfig, which defines the server and stream to which the player should connect. It also allows configuring the aspect ratio of the video. The only difference compared to the Storm Library configuration is that, in the case of the player, we don't need to define a container where it should be embedded via settings/video/containerID parameter. (Storm Player takes care of that). The rest of the configuration remains identical.

To learn more about Stream configuration please check:

Player Configuration Object

                        
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

Additional configuration guides:

On this page

General Configuration

Code Example

Stream Configuration Object

Player Configuration Object

Explanation and description of individual fields

Additional configuration guides