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 StormLibrary 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 stormLibraryConfig = {
    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.

                        
require(['StormPlayer'], function(e){
    const stormPlayer = new StormPlayer({
        containerID: "player1",
        width: 1280,
        height: 720,
        title: "Your streaming video title",
        subtitle: "Subtitle for your video",
        unmuteText: 'UNMUTE SOUND' // label for unmute button
    }, stormLibraryConfig);
});
                    
On this page

Basic explanation