Basic Configuration - Storm JavaScript Player

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

Sample Code

Basic player setup

javascript

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

/**
 * Standard player configuration object containing only basic options.
 */
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 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.

Player configuration example

javascript

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.

Next Step

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