Video Settings - Storm JS Player Core

In this guide, you will learn about all the configuration options for managing the video element, scaling, and setting the player size. If you wish to learn more about how to set the player's size and related configurations, please refer to the Resizing & Scaling Guide.

Sample Code

javascript

const streamConfig = {
    stream: {
      ...   // stream configuration
    },
    settings: {
        ... // basic configuration
        video: {
            scalingMode: "fill",
            containerID: "container",
            aspectRatio: "16:9",
            width: "100%",
            height: "100%"
        }
    }
};

Description of Fields and Parameters

Parameter name	Parameter type	Required	Default	Description
`scalingMode`	string	No	`fill`	The provided value describes how the video should be scaled relative to its internal container. Possible values are: `fill`: The entire video surface will be filled, potentially stretching or distorting the video to fit the container. `letterbox`: The video will retain its original aspect ratio relative to the container, and black bars may appear to fill the remaining space if necessary. `crop`: The video will fill the container while maintaining its original aspect ratio, and any parts of the video that exceed the container's dimensions will be cropped or hidden. `original`: The video will be displayed at its native size, retaining its original resolution and aspect ratio within the container.
`aspectRatio`	string	No	-	This enforces the appropriate aspect ratio between the width and height of the video object relative to its parent container (parameter containerID). A valid parameter consists of two numbers separated by a colon, for example, `16:9` or `4:3`. When calculating the aspect ratio, the value from the "width" parameter will be taken as the base value. Use with `fill` scaling Mode for best results.
`containerID`	string	no	-	The ID of the HTML page's DOM element where the video object is to be created.
`width`	string \| number	No	100%	The width/height of the video element can be specified in the following ways: As a number: In this case, the value is treated as the number of pixels, and the value remains constant. As a string with the `px` suffix: Similar to the first option, the value is considered as the number of pixels, and the value also remains fixed. As a string with the "%" suffix: In this scenario, the video element's width/height will be a percentage of its parent container's value. The video will scale automatically whenever the parent container's dimensions change. If width is present in the configuration along aspectRatio, the height od the video element will be calculated based on provided video proportions.
`height`	string \| number	No	100%	Same as width parameter above.

Next Step

For the next step please check our Storm JS Player Core - Audio Settings guide where you'll learn about apply basic audio settings.