npm install --save @stormstreaming/stormlibraryyarn add @stormstreaming/stormlibrary<script src="https://cdn-scripts.stormstreaming.com/stormlibrary/4-latest.min.js"></script>Please check IIFE (Immediately-invoked function expression) embed method for reference!
<!doctype html>
<html lang="en">
<head>
<title>Storm JavaScript Library - IIFE Sample page</title>
<meta charset="UTF-8" />
<script src="../dist/iife/index.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard configuration object
*/
const streamConfig = {
configurationType: "embedded", // "embedded" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to a storm streaming server instance
application: "live", // application name (can be configured in storm server settings)
port: 80, // server port, usually 80 (non-ssl) or 443 (ssl)
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamKey: "test", // streamKey
},
]
},
settings: {
autoStart: true, // if set to true, video will start playing automatically, but will be muted too
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "original"
containerID: "container", // name of the HTML container
aspectRatio: "16:9", // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
width: "100%", // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Creating an instance of the storm library
*/
const storm = stormLibrary(streamConfig);
/**
* This event is activated when the library is prepared to accept API calls. No method should be invoked on the library
* before this event is registered.
*/
storm.addEventListener("playerCoreReady", function (event) {
console.log("playerCoreReady");
});
/**
* This event is triggered when the library initiates a connection with the Storm Streaming Server or Cloud instance
*/
storm.addEventListener("serverConnectionInitiate", function(event){
console.log("serverConnectionInitiate");
});
/**
* This event is triggered when the library establishes a connection with the Storm Streaming Server or Cloud instance
*/
storm.addEventListener("serverConnect", function(event){
console.log("serverConnect");
});
/**
* This event is called whenever a stream with a specific streamKey was not found (was not published or is not ready yet).
* This event will be triggered after libraryConnected only and will stop a playback sequence.
*/
storm.addEventListener("streamNotFound", function (event) {
console.log("streamNotFound");
});
/**
* Event is triggered when the library could not connect to the Storm Server/Cloud instance (it is not running, or there are
* some network issues). If there are more servers on the config list, the library will try to connect to a different server instead.
*/
storm.addEventListener("serverConnectionError", function (event) {
console.log("serverConnectionError");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. This event will fire again if video buffer goes down to zero.
*/
storm.addEventListener("bufferingStart", function(event){
console.log("bufferingStart");
});
/**
* This event tells us that a video buffer is now full. Playback will start any moment now.
*/
storm.addEventListener("bufferingComplete", function(event){
console.log("bufferingComplete");
});
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
storm.addEventListener("metadataReceived", function(event){
console.log(`-->: video-codec: ${event.metadata.getVideoCodec()}`);
console.log(`-->: audio-codec: ${event.metadata.getAudioCodec()}`);
console.log(`-->: video width: ${event.metadata.getVideoWidth()}`);
console.log(`-->: video height: ${event.metadata.getVideoHeight()}`);
console.log(`-->: fps: ${event.metadata.getNominalFPS()}`);
console.log(`-->: encoder: ${event.metadata.getEncoder()}`);
});
/**
* The event is fired whenever the playback starts.
*/
storm.addEventListener("playbackStart", function(event){
console.log("playbackStarted");
});
/**
* The event is fired whenever the playback pauses.
*/
storm.addEventListener("playbackPause", function(event){
console.log("playbackStarted");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
storm.addEventListener("playbackProgress", function(event){
console.log(`-->: playback duration: ${event.playbackDuration}`);
console.log(`-->: playback start time: ${event.playbackStartTime}`);
console.log(`-->: stream total duration: ${event.streamDuration}`);
console.log(`-->: stream start time: ${event.streamStartTime}`);
console.log(`-->: dvr cache size: ${event.dvrCacheSize}`);
});
/**
* Since all events were added, we can tell the script to start
*/
storm.initialize();
</script>
</body>
</html><!doctype html>
<html lang="en">
<head>
<title>Storm JavaScript Player - UMD Sample page</title>
<meta charset="UTF-8" />
<script src="../dist/umd/index.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard configuration object
*/
const streamConfig = {
configurationType: "embedded", // "embedded" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to a storm streaming server instance
application: "live", // application name (can be configured in storm server settings)
port: 80, // server port, usually 80 (non-ssl) or 443 (ssl)
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamKey: "test", // streamKey
},
]
},
settings: {
autoStart: true, // if set to true, video will start playing automatically, but will be muted too
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "original"
containerID: "container", // name of the HTML container
aspectRatio: "16:9", // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
width: "100%", // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Creating an instance of the storm library
*/
const storm = stormLibrary.create(streamConfig);
/**
* This event is activated when the library is prepared to accept API calls. No method should be invoked on the library
* before this event is registered.
*/
storm.addEventListener("playerCoreReady", function (event) {
console.log("playerCoreReady");
});
/**
* This event is triggered when the library initiates a connection with the Storm Streaming Server or Cloud instance
*/
storm.addEventListener("serverConnectionInitiate", function(event){
console.log("serverConnectionInitiate");
});
/**
* This event is triggered when the library establishes a connection with the Storm Streaming Server or Cloud instance
*/
storm.addEventListener("serverConnect", function(event){
console.log("serverConnect");
});
/**
* This event is called whenever a stream with a specific streamKey was not found (was not published or is not ready yet).
* This event will be triggered after libraryConnected only and will stop a playback sequence.
*/
storm.addEventListener("streamNotFound", function (event) {
console.log("streamNotFound");
});
/**
* Event is triggered when the library could not connect to the Storm Server/Cloud instance (it is not running, or there are
* some network issues). If there are more servers on the config list, the library will try to connect to a different server instead.
*/
storm.addEventListener("serverConnectionError", function (event) {
console.log("serverConnectionError");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. This event will fire again if video buffer goes down to zero.
*/
storm.addEventListener("bufferingStart", function(event){
console.log("bufferingStart");
});
/**
* This event tells us that a video buffer is now full. Playback will start any moment now.
*/
storm.addEventListener("bufferingComplete", function(event){
console.log("bufferingComplete");
});
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
storm.addEventListener("metadataReceived", function(event){
console.log(`-->: video-codec: ${event.metadata.getVideoCodec()}`);
console.log(`-->: audio-codec: ${event.metadata.getAudioCodec()}`);
console.log(`-->: video width: ${event.metadata.getVideoWidth()}`);
console.log(`-->: video height: ${event.metadata.getVideoHeight()}`);
console.log(`-->: fps: ${event.metadata.getNominalFPS()}`);
console.log(`-->: encoder: ${event.metadata.getEncoder()}`);
});
/**
* The event is fired whenever the playback starts.
*/
storm.addEventListener("playbackStart", function(event){
console.log("playbackStarted");
});
/**
* The event is fired whenever the playback pauses.
*/
storm.addEventListener("playbackPause", function(event){
console.log("playbackStarted");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
storm.addEventListener("playbackProgress", function(event){
console.log(`-->: playback duration: ${event.playbackDuration}`);
console.log(`-->: playback start time: ${event.playbackStartTime}`);
console.log(`-->: stream total duration: ${event.streamDuration}`);
console.log(`-->: stream start time: ${event.streamStartTime}`);
console.log(`-->: dvr cache size: ${event.dvrCacheSize}`);
});
/**
* Since all events were added, we can tell the script to start
*/
storm.initialize();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Storm JavaScript Library - ESM Sample page</title>
<meta charset="UTF-8">
</head>
<body>
<div id="container"></div>
<script type="module">
import { StormLibrary } from "../dist/esm/index.js";
/**
* Standard configuration object
*/
const streamConfig = {
configurationType: "embedded", // "embedded" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to a storm streaming server instance
application: "live", // application name (can be configured in storm server settings)
port: 80, // server port, usually 80 (non-ssl) or 443 (ssl)
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamKey: "test", // streamKey
},
]
},
settings: {
autoStart: true, // if set to true, video will start playing automatically, but will be muted too
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "original"
containerID: "container", // name of the HTML container
aspectRatio: "16:9", // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
width: "100%", // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Creating an instance of the storm library
*/
const storm = new StormLibrary(streamConfig);
/**
* This event is activated when the library is prepared to accept API calls. No method should be invoked on the library
* before this event is registered.
*/
storm.addEventListener("playerCoreReady", function (event) {
console.log("playerCoreReady");
});
/**
* This event is triggered when the library initiates a connection with the Storm Streaming Server or Cloud instance
*/
storm.addEventListener("serverConnectionInitiate", function(event){
console.log("serverConnectionInitiate");
});
/**
* This event is triggered when the library establishes a connection with the Storm Streaming Server or Cloud instance
*/
storm.addEventListener("serverConnect", function(event){
console.log("serverConnect");
});
/**
* This event is called whenever a stream with a specific streamKey was not found (was not published or is not ready yet).
* This event will be triggered after libraryConnected only and will stop a playback sequence.
*/
storm.addEventListener("streamNotFound", function (event) {
console.log("streamNotFound");
});
/**
* Event is triggered when the library could not connect to the Storm Server/Cloud instance (it is not running, or there are
* some network issues). If there are more servers on the config list, the library will try to connect to a different server instead.
*/
storm.addEventListener("serverConnectionError", function (event) {
console.log("serverConnectionError");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. This event will fire again if video buffer goes down to zero.
*/
storm.addEventListener("bufferingStart", function(event){
console.log("bufferingStart");
});
/**
* This event tells us that a video buffer is now full. Playback will start any moment now.
*/
storm.addEventListener("bufferingComplete", function(event){
console.log("bufferingComplete");
});
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
storm.addEventListener("metadataReceived", function(event){
console.log(`-->: video-codec: ${event.metadata.getVideoCodec()}`);
console.log(`-->: audio-codec: ${event.metadata.getAudioCodec()}`);
console.log(`-->: video width: ${event.metadata.getVideoWidth()}`);
console.log(`-->: video height: ${event.metadata.getVideoHeight()}`);
console.log(`-->: fps: ${event.metadata.getNominalFPS()}`);
console.log(`-->: encoder: ${event.metadata.getEncoder()}`);
});
/**
* The event is fired whenever the playback starts.
*/
storm.addEventListener("playbackStart", function(event){
console.log("playbackStarted");
});
/**
* The event is fired whenever the playback pauses.
*/
storm.addEventListener("playbackPause", function(event){
console.log("playbackStarted");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
storm.addEventListener("playbackProgress", function(event){
console.log(`-->: playback duration: ${event.playbackDuration}`);
console.log(`-->: playback start time: ${event.playbackStartTime}`);
console.log(`-->: stream total duration: ${event.streamDuration}`);
console.log(`-->: stream start time: ${event.streamStartTime}`);
console.log(`-->: dvr cache size: ${event.dvrCacheSize}`);
});
/**
* Since all events were added, we can tell the script to start
*/
storm.initialize();
</script>
</body>
</html><!doctype html>
<html lang="en">
<head>
<title>Storm JavaScript Player - AMD Sample page</title>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard configuration object
*/
const streamConfig = {
configurationType: "embedded", // "embedded" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to a storm streaming server instance
application: "live", // application name (can be configured in storm server settings)
port: 80, // server port, usually 80 (non-ssl) or 443 (ssl)
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamKey: "test", // streamKey
},
]
},
settings: {
autoStart: true, // if set to true, video will start playing automatically, but will be muted too
video: {
scalingMode: "fill", // possible values "fill", "letterbox", "crop" and "original"
containerID: "container", // name of the HTML container
aspectRatio: "16:9", // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
width: "100%", // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
},
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Path to the AMD module
*/
requirejs(['../dist/amd/index'], function (storm) {
/**
* Library instance
*/
const player = new storm.create(streamConfig);
/**
* This event is activated when the library is prepared to accept API calls. No method should be invoked on the library
* before this event is registered.
*/
storm.addEventListener("playerCoreReady", function (event) {
console.log("playerCoreReady");
});
/**
* This event is triggered when the library initiates a connection with the Storm Streaming Server or Cloud instance
*/
storm.addEventListener("serverConnectionInitiate", function(event){
console.log("serverConnectionInitiate");
});
/**
* This event is triggered when the library establishes a connection with the Storm Streaming Server or Cloud instance
*/
storm.addEventListener("serverConnect", function(event){
console.log("serverConnect");
});
/**
* This event is called whenever a stream with a specific streamKey was not found (was not published or is not ready yet).
* This event will be triggered after libraryConnected only and will stop a playback sequence.
*/
storm.addEventListener("streamNotFound", function (event) {
console.log("streamNotFound");
});
/**
* Event is triggered when the library could not connect to the Storm Server/Cloud instance (it is not running, or there are
* some network issues). If there are more servers on the config list, the library will try to connect to a different server instead.
*/
storm.addEventListener("serverConnectionError", function (event) {
console.log("serverConnectionError");
});
/**
* This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
* very soon. This event will fire again if video buffer goes down to zero.
*/
storm.addEventListener("bufferingStart", function(event){
console.log("bufferingStart");
});
/**
* This event tells us that a video buffer is now full. Playback will start any moment now.
*/
storm.addEventListener("bufferingComplete", function(event){
console.log("bufferingComplete");
});
/**
* This event contains all data related to the video (like resolutions, codecs). It's the third event in the
* sequence for a successful playback.
*/
storm.addEventListener("metadataReceived", function(event){
console.log(`-->: video-codec: ${event.metadata.getVideoCodec()}`);
console.log(`-->: audio-codec: ${event.metadata.getAudioCodec()}`);
console.log(`-->: video width: ${event.metadata.getVideoWidth()}`);
console.log(`-->: video height: ${event.metadata.getVideoHeight()}`);
console.log(`-->: fps: ${event.metadata.getNominalFPS()}`);
console.log(`-->: encoder: ${event.metadata.getEncoder()}`);
});
/**
* The event is fired whenever the playback starts.
*/
storm.addEventListener("playbackStart", function(event){
console.log("playbackStarted");
});
/**
* The event is fired whenever the playback pauses.
*/
storm.addEventListener("playbackPause", function(event){
console.log("playbackStarted");
});
/**
* Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
* DVR cache size must be configured in server configuration file (by default is off)
*/
storm.addEventListener("playbackProgress", function(event){
console.log(`-->: playback duration: ${event.playbackDuration}`);
console.log(`-->: playback start time: ${event.playbackStartTime}`);
console.log(`-->: stream total duration: ${event.streamDuration}`);
console.log(`-->: stream start time: ${event.streamStartTime}`);
console.log(`-->: dvr cache size: ${event.dvrCacheSize}`);
});
/**
* Since all events were added, we can tell the script to start
*/
player.initialize();
});
</script>
</body>
</html>npm install --save @stormstreaming/stormplayeryarn add @stormstreaming/stormplayer<script src="https://cdn-scripts.stormstreaming.com/stormplayer/4-latest.min.js"></script>Please check IIFE (Immediately-invoked function expression) embed method for reference!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Storm Player - IIFE Sample page</title>
<meta charset="UTF-8">
<script src="../dist/iife/index.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard library configuration object
*/
const streamConfig = {
configurationType: "embedded", // "embedded" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
application: "live", // application name (can be configured in storm server settings)
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamKey: "test", // streamKey of the stream
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Standard player configuration object
*/
const playerConfig = {
containerID: "container", // HTML container where player will be added
aspectRatio: "16:9", // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
width: "100%", // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
title: "Title goes here", // title for the stream
subtitle: "This is going to be epic!", // subtitle for the stream
};
/**
* Each player instance must be provided with both player (gui) and library configs
*/
const storm = stormPlayer(playerConfig, streamConfig);
/**
* Event fires whenever player interface becomes visible (e.g. user mouse activity).
*/
storm.addEventListener("guiShow", function(event){
console.log("GUI is visible");
});
/**
* Event fires whenever player interface becomes invisible (user mouse inactivity).
*/
storm.addEventListener("guiHide", function(event){
console.log("GUI is not visible");
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Storm Player - UMD Sample page</title>
<meta charset="UTF-8">
<script src="../dist/umd/index.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard library configuration object
*/
const streamConfig = {
configurationType: "embedded", // "embedded" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
application: "live", // application name (can be configured in storm server settings)
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamKey: "test", // streamKey of the stream
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Standard player configuration object
*/
const playerConfig = {
containerID: "container", // HTML container where player will be added
aspectRatio: "16:9", // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
width: "100%", // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
title: "Title goes here", // title for the stream
subtitle: "This is going to be epic!", // subtitle for the stream
};
/**
* Creating an instance of the storm library
*/
const storm = stormPlayer.create(playerConfig, libraryConfig);
/**
* Event fires whenever player interface becomes visible (e.g. user mouse activity).
*/
storm.addEventListener("guiShow", function(event){
console.log("GUI is visible");
});
/**
* Event fires whenever player interface becomes invisible (user mouse inactivity).
*/
storm.addEventListener("guiHide", function(event){
console.log("GUI is not visible");
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Storm Player - ESM Sample page</title>
<meta charset="UTF-8">
</head>
<body>
<div id="container"></div>
<script type="module">
import {StormPlayer} from "../dist/esm/index.js";
/**
* Standard library configuration object
*/
const streamConfig = {
configurationType: "embedded", // "embedded" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
application: "live", // application name (can be configured in storm server settings)
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamKey: "test", // streamKey of the stream
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Standard player configuration object
*/
const playerConfig = {
containerID: "container", // HTML container where player will be added
aspectRatio: "16:9", // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
width: "100%", // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
title: "Title goes here", // title for the stream
subtitle: "This is going to be epic!", // subtitle for the stream
};
/**
* Each player instance must be provided with both player (gui) and library configs
*/
const storm = new StormPlayer(playerConfig, libraryConfig);
/**
* Event fires whenever player interface becomes visible (e.g. user mouse activity).
*/
storm.addEventListener("guiShow", function(event){
console.log("GUI is visible");
});
/**
* Event fires whenever player interface becomes invisible (user mouse inactivity).
*/
storm.addEventListener("guiHide", function(event){
console.log("GUI is not visible");
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Storm Player - AMD Sample page</title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
/**
* Standard library configuration object
*/
const streamConfig = {
configurationType: "embedded", // "embedded" or "gateway", please check doc for more info
stream: {
serverList: [ // list of streaming server, 2nd, 3rd etc. will be used as backup
{
host: "localhost", // host or ip to the streaming server
application: "live", // application name (can be configured in storm server settings)
port: 80, // server port
ssl: false // whenever SSL connection should be used or not
}
],
sourceList: [
{
protocol: "storm", // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
streamKey: "test", // streamKey of the stream
},
]
},
settings: {
autoStart: true, // if true, video will start playing automatically, but will be muted too
debug: {
console: { // console output
enabled: true // if console output is activated
}
}
}
};
/**
* Standard player configuration object
*/
const playerConfig = {
containerID: "container", // HTML container where player will be added
aspectRatio: "16:9", // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
width: "100%", // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
title: "Title goes here", // title for the stream
subtitle: "This is going to be epic!", // subtitle for the stream
};
/**
* Path to the AMD module
*/
requirejs(['../dist/amd/index'], function (storm) {
/**
* Library instance
*/
const player = new storm.create(playerConfig, libraryConfig);
/**
* Event fires whenever player interface becomes visible (e.g. user mouse activity).
*/
player.addEventListener("guiShow", function(event){
console.log("GUI is visible");
});
/**
* Event fires whenever player interface becomes invisible (user mouse inactivity).
*/
player.addEventListener("guiHide", function(event){
console.log("GUI is not visible");
});
});
</script>
</body>
</html>
