Show topics

Video Settings - Storm JavaScript Library

In this guide, you will get to know all the configuration options for managing the video element.

Sample Code

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

Description of Fields and Parameters

Parameter nameParameter typeRequiredDefaultDescription
scalingModestringNofillThe 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.
aspectRatiostringYes for StormLibrary, No for StormPlayer-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.
containerIDstringno-The ID of the HTML page's DOM element where the video object is to be created.
widthstring | numberNo100%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
Table 1. Video Configuration Table.
Next Step

For the next step please check our Storm JavaScript Audio Settings guide where you’ll learn about volume control.

Support Needed?

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

On this page

Sample Code

Description of Fields and Parameters

Next Step