Basic explanation - Storm JavaScript Player

Before we can create our Storm Player instance, a proper configuration object must be added. It is the same object as the one used in Storm Library and it can be based on either Embedded Configuration or Gateway Configuration. The only difference is the lack of videoContainer parameter as it's being maintained by the player.

                        
const libraryConfig = {
    role: "player",
    connectionType: "direct",
    stream: {
        serverList: [
            { host: "sub1.yourdomain.com", application:"live", port: 443, ssl: true}
        ],
        sourceList: [
            { protocol: "Storm", streamName:"test_hd", application:"live", streamInfo: {label: "720p60"}, default: true},
            { protocol: "Storm", streamName:"test_sd", application:"live", streamInfo: {label: "480p"}, default: true},
            { protocol: "Storm", streamName:"test_lq", application:"live", streamInfo: {label: "360p"}, default: true},
        ],
    },
    settings: {
        autoStart: true,
        restartOnError: true,
        video: {
            scalingMode: "letterbox",   // "letterbox", "crop", "fill", "resize"
        },
        debug: {
            console: {
                enabled: true,
                logTypes: ["INFO", "ERROR", "TRACE", "WARNING", "SUCCESS"],
                monoColor: false
            },
        }
    },
};
                    

Once the configuration object is in place, we can create a new instance of the player.

                        
const stormPlayerConfig = {
    containerID: "player1",
    width: 1280,
    height: 720,
    title: "Your streaming video title",
    subtitle: "Subtitle for your video",
    unmuteText: 'UNMUTE SOUND' // label for unmute button
};

//This sample uses IIFE embed method. Creating library instance will look slightly different for AMD, UMD or ESM
const player = stormPlayer(libraryConfig, playerConfig);
                    

Alternatively a custom HTML element can be used to spawn the player. It replaces the above code with:

                        
<storm-player
    containerID="player1"
    width="640"
    height="360"
    title="Your streaming video title"
    subtitle="Subtitle for your video"
    unmuteText="UNMUTE SOUND"
/>
                    

                        
// we need to inject stormLibrary config into the element
document.querySelector('[containerID="player1"]').setAttribute("config", JSON.stringify(libraryConfig));