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

To embed the player on your website you can use our CDN hosted file. It's based on IIFE and it's compatible with all modern browsers! Latest version can be found on our github page: https://github.com/StormStreaming/stormplayer-js/releases

Installation via Package Managers

  1. NPM: Before using NPM, please install Node.js.

    To integrate Storm Player into your project using NPM, execute the following command:

                                    
    npm install @stormstreaming/stormplayer
                                
  2. Yarn: Yarn must be installed before use, which you can do via NPM.

    To incorporate Storm Player into your project using Yarn, execute the following command:

                                    
    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
                    
This command will install all required dependencies.

                        
npm build
                    
Compiles all styles, script and html. Generated files will be placed within the dist folder.

                        
npm dev
                    
Watches for changes in files and compiles code to executable JavaScript. A local HTTP server will be started as well.

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 = {
    stream: {
        serverList: [{
            host: "localhost",
            application: "live",
            port: 80,
            ssl: false
        }],
        streamKey: "test"
    },
    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);
    });
                                
Next Step

For the next step please check our Storm JavaScript Player - Stream & Server guide where you’ll learn how to connect the player with Storm Streaming Cloud or Server instance.

Support Needed?

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