Installation - Storm JavaScript Player

Storm JavaScript Player is very easy to install. You can either grab a script file from our CDN (IIFE format) or install the player using NPM or Yarn.

Storm CDN

Feel free to pick our Storm Player (in IIFE format) from our CDN:

                        
<script src="https://cdn-scripts.stormstreaming.com/stormplayer/4-latest.min.js"></script>
                            

Optionally you can link to the latest major.minor, for example 4.0-latest.min.js, or pick specific release: 4.0.0.min.js

Installation via package managers

1. NPM - To include Storm Library in Node, first install Node

                                   
   npm install @stormstreaming/stormplayer
                               

2. Yarn - Before using Yarn, make sure to install it first

                                   
   yarn add @stormstreaming/stormplayer
                               

Manual installation

You can manually grab index.js from /dist/iife folder on our Git-Hub page. You will find the latest release here: https://github.com/StormStreaming/stormplayer-js/releases

Source codes

Storm Player comes with all source-codes available for free. Player can be easily modified and customized according to needs. In order to recompile the player NPM is required. Project can be downloaded and/or forked from https://github.com/StormStreaming/stormplayer-js. Below you'll find basic usage.

                        
npm install
                    

                        
npm build
                    

                        
npm dev
                    

Embedding the player

Storm Player comes in IIFE, ESM, AMD, UMD and CJS formats. If you are unfamiliar with these, please grab IIFE version, as it's easiest to embed in a modern browser. All packages are located in /dist folder under their respective names.

Initiating the player

Once the player is properly linked to your page, a player instance can be created. Please keep in mind that you can create and manage multiple instances of Storm Player at a time. Each instance requires a valid configuration object in order to work properly.

                        
const streamConfig = {
    configurationType: "embedded",
    stream: {
        serverList: [{
            host: "localhost",
            application: "live",
            port: 80,
            ssl: false
        }],
        sourceList: [{
                protocol: "storm",
                streamKey: "test",
                streamInfo: {
                    label: "SD"
                }
            },
            {
                protocol: "storm",
                streamKey: "test1",
                streamInfo: {
                    label: "HD"
                }
            },
        ]
    },
    settings: {
        autoStart: false,
    },
};

const playerConfig = {
    containerID: "container",
    width: "100%",
    height: "100%",
    aspectRatio: "16:9",
    title: "Test title123",
    subtitle: "Subtitle223",
};
                    

Initialization will look different depending on picked JavaScript format:

1. IIFE (Immediately invoked function expression)

                                   
   const player = stormPlayer(playerConfig, streamConfig);
                               

2. ESM (ECMAScript Modules)

                                   
   import {StormPlayer} from "../../dist/esm/index.js";
   const storm = new StormPlayer(playerConfig, streamConfig);
                               

3. UMD (Universal Module Definition)

                                   
   const storm = stormPlayer.create(playerConfig, streamConfig);
                               

4. AMD (Asynchronous Module Definition)

                                   
   requirejs(['../../dist/amd/index'], function(storm) {
       const stormPlayer = new storm.create(playerConfig, streamConfig);
   });