NanoPlayer

NanoPlayer (H5Live) Public API Class 4.29.0

Kind: global class Version: 4.29.0

new NanoPlayer(playerDivId)

The constructor. The source can be loaded via script tag, AMD (requirejs) or CommonJS

Param	Type	Description
playerDivId	`string`	The div element the player will be embedded into.

Example

<!-- Example: load player with new video element into playerDiv -->
<div id="playerDiv"></div>
<script type="text/javascript" src="nanoplayer.4.min.js"></script>
<script type="text/javascript">
    var player;
    var config = {
        "source": {
            "entries": [
                    {
                        "h5live": {
                             // your rtmp stream
                            "rtmp": {
                                "url": "rtmp://bintu-play.nanocosmos.de/play",
                                "streamname": "XXXXX-YYYYY"
                            },
                            "server": {
                                "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                                "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                                "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                            }
                        }
                    }
            ]
        }
    };
    function initPlayer() {
        player = new NanoPlayer('playerDiv');
        player.setup(config).then(function (config) {
            console.log('setup ok with config: ' + JSON.stringify(config));
        }, function (error) {
            console.log(error);
        });
    }
    // load player from playerDiv
    document.addEventListener('DOMContentLoaded', function () {
        initPlayer();
    });
</script>

Example

<!-- Example: load player with existing html video element -->
<div id="playerDiv">
    <video id="myPlayer"></video>
    <!-- HLS PLAYBACK ONLY uses 2 video elements for playback if more than one stream is configured, required for seamless stream switching -->
    <video id="myPlayer2"></video>
</div>
<script>
    var player;
    var config = {
        "source": {
            "entries": [
                    {
                        "h5live": {
                             // your rtmp stream
                            "rtmp": {
                                "url": "rtmp://bintu-play.nanocosmos.de/play",
                                "streamname": "XXXXX-YYYYY"
                            },
                            "server": {
                                "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                                "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                                "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                            }
                        }
                    }
            ]
        },
        "playback": {
            "videoId": ["myPlayer", "myPlayer2"]
        }
    };
    function initPlayer() {
        player = new NanoPlayer('playerDiv');
        player.setup(config).then(function (config) {
            console.log('setup ok with config: ' + JSON.stringify(config));
        }, function (error) {
            console.log(error);
        });
    }
    document.addEventListener('DOMContentLoaded', function () {
        initPlayer();
    });
</script>

Example

<!-- Example: load player with require.js -->
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">
    var player;
    requirejs.config({
        paths: {
            // loads the player ...
            // for a local copy of the minified player use a relative path e.g. 'js/nanoplayer.4.min'
            // if 'baseUrl' is defined a local path have to be relative to the base path
            nanoplayer: '//demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js'
        },
        waitSeconds: 20, // timeout for loading modules
    });
    require('nanoplayer', function() {
        initPlayer();
    });
</script>

nanoPlayer.version : `string`

The version of the player.

Kind: instance property of NanoPlayer

nanoPlayer.coreversion : `string`

The version of the core.

Kind: instance property of NanoPlayer

nanoPlayer.viewversion : `string`

The version of the view.

Kind: instance property of NanoPlayer

nanoPlayer.type : `string`

The type of the player.

Kind: instance property of NanoPlayer

nanoPlayer.id : `string`

The unique id of the player.

Kind: instance property of NanoPlayer

nanoPlayer.capabilities : `Array.<string>`

The supported tech names of the player.

Kind: instance constant of NanoPlayer

nanoPlayer.setup(config) ⇒ `Promise.<(config|error)>`

Initializes the player with a given config object.

Kind: instance method of NanoPlayer
See: config

Param	Type	Description
config	`config`	The config object for the player including sources, events, styles.

Example

// player instance of NanoPlayer
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

nanoPlayer.destroy()

Cleans up the player and removes all nested elements from the container div.

Kind: instance method of NanoPlayer

Example

// player instance of NanoPlayer
player.destroy();
player.setup(config);

nanoPlayer.play()

Plays the player.

Kind: instance method of NanoPlayer

Example

// player instance of NanoPlayer
player.play();

nanoPlayer.pause()

Pauses the player.

Kind: instance method of NanoPlayer

Example

// player instance of NanoPlayer
player.pause();

nanoPlayer.mute()

Mutes the player.

Kind: instance method of NanoPlayer

Example

// player instance of NanoPlayer
player.mute();

nanoPlayer.unmute()

Unmutes the player.

Kind: instance method of NanoPlayer

Example

// player instance of NanoPlayer
player.unmute();

nanoPlayer.setVolume(volume)

Sets the volume of the player.

NOT AVAILABLE FOR HLS PLAYBACK

See here for more informations.

Kind: instance method of NanoPlayer

Param	Type	Description
volume	`number`	The volume to set in a range from 0.0 to 1.0.

Example

// player instance of NanoPlayer
player.setVolume(0.3);

nanoPlayer.updateSource(source) ⇒ `Promise.<(config|error)>`

Updates the source of the player.

Kind: instance method of NanoPlayer
See: config

Param	Type	Default	Description
source	`object`		The object to configure the source to play, one of the following properties have to be set.
[source.entries]	`Array.<entry>`		The source entries array for a set of streams. USE INSTEAD OF SOURCE.H5LIVE. Used to configure stream entries. Can have one to many 'entry' objects. Only one existing entry is similar than a single source. In this case no entries options are needed.
[source.startIndex]	`number`	`0`	The index of the entry to start playback with. Can be in the range from 0 to 'entries.length-1'.
[source.options]	`object`		The object to configure the source entries options.
[source.options.switch]	`object`		The object to configure the stream switch options like method etc.
[source.options.switch.method]	`string`	`"server"`	The update method. Possible values are 'server' (default) and 'client'.
[source.options.switch.pauseOnError]	`boolean`	`false`	If set the player stops if an error occure during the stream switch. Default is false.
[source.options.switch.forcePlay]	`boolean`	`true`	If set the player starts playback in case the player is paused. Default is true.
[source.options.switch.fastStart]	`boolean`	`false`	DEPRECATED. Only if method is 'server'. Tries to accelerate the startup time of the new source. Default is false.
[source.options.switch.timeout]	`number`	`20`	The timeout for the update source request in seconds. If reached the error 4006 will thrown in the 'onUpdateSourceFail' event. Default is 10 seconds, valid range is between 5 and 30.
[source.options.switch.tag]	`string`		A custom field that can be any string like 'stream-800k' or '720p'. This tag will be returned in any completion event of the 'updateSource' request like 'onUpdateSourceSuccess', 'onUpdateSourceFail' and 'onUpdateSourceAbort'.
[source.options.adaption]	`object`		The object to set an adaption for switching.
[source.options.adaption.rule]	`string`	`"none"`	The switch rule if multiple entries are defined. Possible values are 'deviationOfMean' (ABR automatic), 'deviationOfMean2' (ABR automatic) and 'none' (default, means only manual stream switch via 'switchStream' possible).
[source.options.adaption.downStep]	`number`	`1`	The minimum number of steps during a ABR down switch ('deviationOfMean' and 'deviationOfMean2' only).
[source.h5live]	`object`		DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. The h5live object to configure the h5live connection.
source.h5live.server	`object`		The h5live server object.
[source.h5live.server.websocket]	`string`		The h5live websocket url.
[source.h5live.server.progressive]	`string`		The h5live progressive download url.
[source.h5live.server.hls]	`string`		The h5live hls url. Have to be set for playback on iOS 10 or higher. iOS 9 or lower is not supported.
[source.h5live.token]	`string`		The h5live server token.
[source.h5live.rtmp]	`object`		The rtmp playout object for h5live playback.
source.h5live.rtmp.url	`string`		The rtmp playout url. Have to include the domain, port and application e.g. 'rtmp://example.com:80/live'.
source.h5live.rtmp.streamname	`string`		The rtmp streamname.
[source.h5live.security]	`object`		The h5live security object for h5live playback.
source.h5live.security.token	`string`		The security service token.
source.h5live.security.expires	`string`		The time the token expires (system time).
source.h5live.security.options	`string`		The security options.
source.h5live.security.tag	`string`		The custom tag to decrypt the token.
[source.h5live.params]	`object`		The params object to pass custom query parameters over the h5live server connection. Parameters can be passed as key/value pairs.
[source.bintu]	`object`		DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. An bintu object to get sources.
source.bintu.streamid	`string`		The bintu stream id.
[source.bintu.apiurl]	`string`	`"https://bintu.nanocosmos.de"`	The bintu api url.
[source.hls]	`string`		DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. An hls playout url as string.

Example

var source = {
    "entries": [
            {
                "index": 0,
                "label": "high",
                "tag": "this is a high quality stream",
                "info": {
                    "bitrate": 1200,
                    "width": 1280,
                    "height": 720,
                    "framerate": 30
                },
                "hls": "",
                "h5live": {
                    "rtmp": {
                        "url": "rtmp://bintu-play.nanocosmos.de/play",
                        "streamname": "XXXXX-YYYY1"
                    },
                    "server": {
                        "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                        "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                        "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                    },
                    "token": "",
                    "security": {}
                },
                "bintu": {}
            },
            {
                "index": 1,
                "label": "medium",
                "tag": "this is a medium quality stream",
                "info": {
                    "bitrate": 800,
                    "width": 864,
                    "height": 480,
                    "framerate": 30
                },
                "hls": "",
                "h5live": {
                    "rtmp": {
                        "url": "rtmp://bintu-play.nanocosmos.de/play",
                        "streamname": "XXXXX-YYYY2"
                    },
                    "server": {
                        "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                        "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                        "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                    },
                    "token": "",
                    "security": {}
                },
                "bintu": {}
            },
            {
                "index": 2,
                "label": "low",
                "tag": "this is a low quality stream",
                "info": {
                    "bitrate": 400,
                    "width": 426,
                    "height": 240,
                    "framerate": 15
                },
                "hls": "",
                "h5live": {
                    "rtmp": {
                        "url": "rtmp://bintu-play.nanocosmos.de/play",
                        "streamname": "XXXXX-YYYY3"
                    },
                    "server": {
                        "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                        "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                        "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                    },
                    "token": "",
                    "security": {}
                },
                "bintu": {}
            }
    ],
    "options": {
        "adaption": {
            "rule": "deviationOfMean2",
            "downStep": 1
        },
        "switch": {
            'method': 'server',
            'pauseOnError': false,
            'forcePlay': true,
            'timeout': 20
        }
    },
    "startIndex": 2 // lowest
};
// player instance of NanoPlayer
player.updateSource(source).then(function (config) {
    console.log('update source ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

Example

var source = {
    "entries": [
            {
                "index": 0,
                "label": "high", // optional
                "tag": "this is a high quality stream", // optional
                "info": { // optional
                    "bitrate": 1200,
                    "width": 1280,
                    "height": 720,
                    "framerate": 30
                },
                "h5live": {
                     // your rtmp stream
                    "rtmp": {
                        "url": "rtmp://bintu-play.nanocosmos.de/play",
                        "streamname": "XXXXX-YYYYY"
                    },
                    "server": {
                        "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                        "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                        "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                    },
                    // optional (secure token)
                    "security": {
                        "token": 'awe456b367g4e6rm8f56hbe6gd8f5m8df6n8idf6tf8mfd68ndi',
                        "expires": '1519819200',
                        "options": '15',
                        "tag": 'anyTag'
                    }
                }
            }
    ]
};
// player instance of NanoPlayer
player.updateSource(source).then(function (config) {
    console.log('update source initialized with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

nanoPlayer.switchStream(index) ⇒ `Promise.<(config|error)>`

Switch to a stream given over source entries.

Kind: instance method of NanoPlayer
See: entry

Param	Type	Description
index	`number`	The index of the stream in the given stream set to switch to.

Example

// player instance of NanoPlayer
player.switchStream(1).then(function (config) {
    console.log('switch stream initialized with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

nanoPlayer.setAdaption(adaption)

Set a desired adaption rule or disable adaption on the fly.

Kind: instance method of NanoPlayer
See: config

Param	Type	Description
adaption	`object`	The adaption object similar than the object 'config.source.options.adaption'.

Example

// player instance of NanoPlayer
var adaption = {
    "rule": "deviationOfMean2",
    "downStep": 2
}
if (!useAdaption) {
    adaption.rule = "none";
}
player.setAdaption(adaption);

nanoPlayer.requestFullscreen() ⇒ `Promise.<(undefined|error)>`

Request fullscreen mode for the player if not entered.

Kind: instance method of NanoPlayer

Example

// player instance of NanoPlayer
player.requestFullscreen()
   .then(function (){
       console.log('requestFullscreen resolved');
   })
   .catch(function(err) {
       // error reasons can be 'denied' or 'disabled' (e.g. in audio player mode)
       console.log('requestFullscreen rejected: ' + err.reason);
   });

nanoPlayer.exitFullscreen() ⇒ `Promise.<(undefined|error)>`

Exit fullscreen mode if entered.

Kind: instance method of NanoPlayer

Example

// player instance of NanoPlayer
player.exitFullscreen()
   .then(function (){
       console.log('exitFullscreen resolved');
   })
   .catch(function(err) {
       // error reasons can be 'denied' or 'disabled' (e.g. in audio player mode)
       console.log('exitFullscreen rejected: ' + err.reason);
   });

"onReady"

The ready event to pass in the 'config.events' object at the setup call. Fires if the player is ready to play after successful setup.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.config	`config`	The config object.
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onReady = function (event) {
    console.log('Ready: ' + JSON.stringify(event.data.config));
}
config.events.onReady = onReady;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onPlay"

The play event to pass in the 'config.events' object at the setup call. Fires if playout is started.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.stats	`object`	The startup stats object.
data.stats.connecting	`number`	The time when 'player.play()' is just called in ms (always zero).
data.stats.connected	`number`	The time when the connection is established in ms (relative to 'connecting').
data.stats.firstFragmentReceived	`number`	The time when the first fragment is received in ms (relative to 'connecting').
data.stats.firstFrameRendered	`number`	The time when the first frame is rendered in ms (relative to 'connecting').
data.stats.playable	`number`	The time when the buffer has enough data to start in ms (relative to 'connecting').
data.stats.playing	`number`	The time when the playback is started in ms (relative to 'connecting'). It's the total startup time.
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onPlay = function (event) {
    console.log('Playing');
    console.log('play stats: ' + JSON.stringify(event.data.stats));
};
config.events.onPlay = onPlay;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onPause"

The pause event to pass in the 'config.events' object at the setup call. Fires if playout is paused.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.reason	`pausereason`	The reason of pausing.
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onPause = function (event) {
    console.log('Pause');
    if (event.data.reason !== 'normal') {
         alert('Paused with reason: ' + event.data.reason);
    }
};
config.events.onPause = onPause;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onLoading"

The load event to pass in the 'config.events' object at the setup call. Fires if playout was stopped or player is ready after setup and tries to play.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.connectDelay	`number`	The time in milliseconds to wait for initializing the connection to the server to get the stream. Is zero if no reconnect is imminent.
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onLoading = function (event) {
    console.log('Loading with delay of ' + event.data.connectDelay + ' milliseconds');
};
config.events.onLoading = onLoading;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onStartBuffering"

The start buffering event to pass in the 'config.events' object at the setup call. Fires if playout is started but no media is available.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object (empty).
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onStartBuffering = function (event) {
    console.log('Buffering');
};
config.events.onStartBuffering = onStartBuffering;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onStopBuffering"

The stop buffering event to pass in the 'config.events' object at the setup call. Fires if playout resumes after buffering.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object (empty).
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onStopBuffering = function (event) {
    console.log('Resume');
};
config.events.onStopBuffering = onStopBuffering;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onError"

The error event to pass in the 'config.events' object at the setup call. Fires if any kind of error occures.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.code	`errorcode`	The error code.
data.message	`string`	The error cause as human readable string.
[data.playback]	`object`	The optional data playback object (since 4.28.0). Includes current playback stats. Only available if error is a startup error.
data.playback.bufferDelayCurrent	`number`	Buffer delay in ms experienced at the time of the error. Always available.
data.playback.bitrateCurrent	`number`	The bitrate in Bit/s of playback at the time the error occurred. Always available.
data.playback.framerateCurrent	`number`	Playback framerate per second at the time of the error. Always available.
[data.state]	`object`	The optional data state object (since 4.28.0). Includes all timestamps of the startup phase that have been reached before the error occurred. Only available if error is a startup error.
[data.state.connected]	`number`	Timestamp in ms indicating when the connection was established (relative to load start). Optional.
[data.state.firstFragmentReceived]	`number`	Time in ms at which the first fragment of media data was received (relative to load start). Optional.
[data.state.firstFrameRendered]	`number`	Time in ms when the first frame was rendered (relative to load start). Optional.
[data.state.playable]	`number`	Timestamp in ms indicating when playback was ready to begin (relative to load start). Optional.
[data.state.playing]	`number`	Timestamp in ms indicating when playback actually started (relative to load start). Optional.
data.state.error	`number`	Timestamp in ms marking when the error occurred (relative to load start). Always available.
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onError = function (event) {
    if (event.data.state) {
        alert('Startup Error: ' + event.data.code + ' ' + event.data.message + ' at ' + event.data.state.error + 'ms after load start');
    }
    else {
        alert('Error: ' + event.data.code + ' ' + event.data.message);
    }
};
config.events.onError = onError;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onStats"

The stats event to pass in the 'config.events' object at the setup call. Fires if the player has measured statistics.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.stats	`object`	The stats object.
data.stats.currentTime	`number`	The current time of the video.
data.stats.playout	`object`	The playout object.
data.stats.playout.start	`number`	The start play time of the video.
data.stats.playout.end	`number`	The end play time of the video.
data.stats.buffer	`object`	The buffer object.
data.stats.buffer.start	`number`	The start buffer time of the video.
data.stats.buffer.end	`number`	The end buffer time of the video.
data.stats.buffer.delay	`object`	The delay buffer object.
data.stats.buffer.delay.current	`number`	The current delay time.
data.stats.buffer.delay.avg	`number`	The average delay time over the last second.
data.stats.buffer.delay.min	`number`	The minimum delay time over the last second.
data.stats.buffer.delay.max	`number`	The maximum delay time over the last second.
data.stats.bitrate	`object`	The bitrate object.
data.stats.bitrate.current	`number`	The current bitrate in Bit/s. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.stats.bitrate.avg	`number`	The average bitrate in Bit/s over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.stats.bitrate.min	`number`	The minimum bitrate in Bit/s over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.stats.bitrate.max	`number`	The maximum bitrate in Bit/s over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.stats.framerate	`object`	The framerate object.
data.stats.framerate.current	`number`	The current network framerate. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.stats.framerate.avg	`number`	The average network framerate over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.stats.framerate.min	`number`	The minimum network framerate over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.stats.framerate.max	`number`	The maximum network framerate over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.stats.playbackrate	`object`	The playbackrate object. (since 4.14.1)
data.stats.playbackrate.current	`number`	The current video playbackrate. (since 4.14.1)
data.stats.playbackrate.avg	`number`	The average video playbackrate over the last 10 seconds. (since 4.14.1)
data.stats.playbackrate.min	`number`	The minimum video playbackrate over the last 10 seconds. (since 4.14.1)
data.stats.playbackrate.max	`number`	The maximum video playbackrate over the last 10 seconds. (since 4.14.1)
data.stats.buffergoal	`object`	The buffergoal object. Values used by the latency control (since 4.14.1)
data.stats.buffergoal.base	`number`	The suggested calculated buffergoal value depending on the latency control mode and playback conditions (since 4.14.1)
data.stats.buffergoal.real	`number`	The final calculated buffergoal value including offsets (since 4.14.1)
data.stats.buffergoal.min	`number`	The minimum possible buffergoal value. (since 4.14.1)
data.stats.buffergoal.max	`number`	The maximum possible buffergoal value. (since 4.14.1)
data.stats.quality	`object`	The video playback quality object.
data.stats.quality.corruptedVideoFrames	`number`	The total number of corrupted video frames.
data.stats.quality.corruptedVideoFramesCurrent	`number`	The number of corrupted video frames within the last second.
data.stats.quality.creationTime	`number`	The time in miliseconds since the start of the navigation and the creation of the video element.
data.stats.quality.droppedVideoFrames	`number`	The total number of dropped video frames.
data.stats.quality.droppedVideoFramesCurrent	`number`	The number of dropped video frames within the last second.
data.stats.quality.totalVideoFrames	`number`	The total number of created and dropped video frames since creation of the video element.

Example

// player instance of NanoPlayer
var onStats = function (event) {
    console.log('Stats: ' + JSON.stringify(event.data.stats));
};
config.events.onStats = onStats;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onMetaData"

The metadata event to pass in the 'config.events' object at the setup call. The config param 'playback.metadata' have to be set to true. Fires if the player receives metadata.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.handlerName	`string`	The name of the metadata handler.
data.message	`*`	The metadata message.
data.streamTime	`number`	The timestamp of the metadata in relation to currentTime.

Example

// player instance of NanoPlayer
var onMetaData = function (event) {
    console.log('MetaData: ' + JSON.stringify(event.data));
};
config.events.onMetaData = onMetaData;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onMute"

The mute event to pass in the 'config.events' object at the setup call. Fires if the player is muted.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.volume	`number`	The current volume in a range from 0.0 to 1.0.

Example

// player instance of NanoPlayer
var onMute = function (event) {
    console.log('Muted with volume: ' + event.data.volume);
};
config.events.onMute = onMute;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onUnmute"

The unmute event to pass in the 'config.events' object at the setup call. Fires if the player is unmuted.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.volume	`number`	The current volume in a range from 0.0 to 1.0.

Example

// player instance of NanoPlayer
var onUnmute = function (event) {
    console.log('Unmuted with volume: ' + event.data.volume);
};
config.events.onUnmute = onUnmute;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onVolumeChange"

The volume change event to pass in the 'config.events' object at the setup call. Fires if the player's volume has changed.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.volume	`number`	The current volume in a range from 0.0 to 1.0.

Example

// player instance of NanoPlayer
var onVolumeChange = function (event) {
    console.log('Volume: ' + event.data.volume);
};
config.events.onVolumeChange = onVolumeChange;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onStreamInfo"

The stream info event to pass in the 'config.events' object at the setup call. Fires if informations about a stream is available right before playback starts.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.streamInfo	`object`	The stream info object.
data.streamInfo.url	`string`	The complete stream url with parameters.
data.streamInfo.rtmp	`object`	The rtmp stream object.
data.streamInfo.rtmo.url	`string`	The rtmp stream url.
data.streamInfo.rtmp.streamname	`string`	The rtmp streamname.
data.streamInfo.haveAudio	`boolean`	Indicates if the stream contains audio.
data.streamInfo.haveVideo	`boolean`	Indicates if the stream contains video.
data.streamInfo.audioInfo	`object` \| `null`	The audio info object. Is 'null' if the stream contains no audio.
data.streamInfo.audioInfo.bitsPerSample	`number` \| `null`	The bits per sample. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.streamInfo.audioInfo.sampleRate	`number` \| `null`	The audio sample rate. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.streamInfo.audioInfo.channels	`number` \| `null`	The number of audio channels. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.streamInfo.videoInfo	`object` \| `null`	The stream info object. Is 'null' if the stream contains no video.
data.streamInfo.videoInfo.width	`number` \| `null`	The width of the video. Is 'null' if not available.
data.streamInfo.videoInfo.height	`number` \| `null`	The height of the video. Is 'null' if not available.
data.streamInfo.videoInfo.frameRate	`number` \| `null`	The video frame rate. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.

Example

// player instance of NanoPlayer
var onStreamInfo = function (event) {
    console.log('StreamInfo: ' + JSON.stringify(event.data.streamInfo));
};
config.events.onStreamInfo = onStreamInfo;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onStreamInfoUpdate"

The stream info event to pass in the 'config.events' object at the setup call. Fires if the stream format has changed during playback.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.streamInfo	`object`	The stream info object.
data.streamInfo.url	`string`	The complete stream url with parameters.
data.streamInfo.haveAudio	`boolean`	Indicates if the stream contains audio.
data.streamInfo.haveVideo	`boolean`	Indicates if the stream contains video.
data.streamInfo.audioInfo	`object` \| `null`	The audio info object. Is 'null' if the stream contains no audio.
data.streamInfo.audioInfo.bitsPerSample	`number` \| `null`	The bits per sample. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.streamInfo.audioInfo.sampleRate	`number` \| `null`	The audio sample rate. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.streamInfo.audioInfo.channels	`number` \| `null`	The number of audio channels. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
data.streamInfo.videoInfo	`object` \| `null`	The stream info object. Is 'null' if the stream contains no video.
data.streamInfo.videoInfo.width	`number` \| `null`	The width of the video. Is 'null' if not available.
data.streamInfo.videoInfo.height	`number` \| `null`	The height of the video. Is 'null' if not available.
data.streamInfo.videoInfo.frameRate	`number` \| `null`	The video frame rate. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.

Example

// player instance of NanoPlayer
var onStreamInfoUpdate = function (event) {
    console.log('StreamInfo updated: ' + JSON.stringify(event.data.streamInfo));
};
config.events.onStreamInfoUpdate = onStreamInfoUpdate;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onWarning"

The error event to pass in the 'config.events' object at the setup call. Fires if something is not as expected, but functionality works.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.message	`string`	The warning as human readable string.
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onWarning = function (event) {
    console.log('Warning: ' + event.data.message);
};
config.events.onWarning = onWarning;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onDestroy"

The destroy event to pass in the 'config.events' object at the setup call. Fires if the player is destroyed.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object (empty).
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onDestroy = function (event) {
    console.log('player destroy');
};
config.events.onDestroy = onDestroy;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onUpdateSourceInit"

The event to signal that the update source request is initialized. This is always the start event, an completion event will follow.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.source	`object`	The current source object.
data.entry	`object`	The current source entry.
data.rule	`string`	The adaption switch rule.
data.options	`object`	The switch options object.
data.tag	`string`	The custom tag string given in the options object of the 'updateSource' call. Is an empty string if not set.
data.count	`number`	The count of the update source request to identify the paired start and completion event. The start event is 'onUpdateSourceInit' and completion events are 'onUpdateSourceSuccess', 'onUpdateSourceFail' and 'onUpdateSourceAbort'
data.type	`string`	The switch type. Here always 'update'.
data.id	`number`	The id of the update source request to identify the paired start and completion event. The start event is 'onUpdateSourceInit' and completion events are 'onUpdateSourceSuccess', 'onUpdateSourceFail' and 'onUpdateSourceAbort'
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onUpdateSourceInit = function (event) {
    console.log('update source init with source: ' + JSON.stringify(event.data.source) + ' and options: ' + JSON.stringify(event.data.options));
    console.log('update source tag: ' + event.data.tag);
    console.log('update source count: ' + event.data.count);
};
config.events.onUpdateSourceInit = onUpdateSourceInit;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onUpdateSourceSuccess"

The event to signal that the update source request is succeeded. Fires if the source is updated. This is an completion event that follows on an start event.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.source	`object`	The current source object.
data.entry	`object`	The current source entry.
data.rule	`string`	The adaption switch rule.
data.tag	`string`	The custom tag string given in the options object of the 'updateSource' call. Is an empty string if not set.
data.count	`number`	The count of the update source request to identify the paired start and completion event. The start event is 'onUpdateSourceInit' and completion events are 'onUpdateSourceSuccess', 'onUpdateSourceFail' and 'onUpdateSourceAbort'
data.type	`string`	The switch type. Here always 'update'.
data.id	`number`	The id of the update source request to identify the paired start and completion event. The start event is 'onUpdateSourceInit' and completion events are 'onUpdateSourceSuccess', 'onUpdateSourceFail' and 'onUpdateSourceAbort'
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onUpdateSourceSuccess = function (event) {
    console.log('update source success with entry: ' + JSON.stringify(event.data.entry) + ', with tag: ' + event.data.tag + ' and count: ' + event.data.count);
};
config.events.onUpdateSourceSuccess = onUpdateSourceSuccess;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onUpdateSourceFail"

The event to signal that the update source request is failed. Fired if an error occure during the update. This is an completion event that follows on an start event.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data.source	`object`	The current source object.
data.entry	`object`	The current source entry.
data.rule	`string`	The adaption switch rule.
data.code	`object`	The error code. Similar to the errorcodes.
data.message	`object`	The error message.
data.tag	`string`	The custom tag string given in the options object of the 'updateSource' call. Is an empty string if not set.
data.count	`number`	The count of the update source request to identify the paired start and completion event. The start event is 'onUpdateSourceInit' and completion events are 'onUpdateSourceSuccess', 'onUpdateSourceFail' and 'onUpdateSourceAbort'
data.type	`string`	The switch type. Here always 'update'.
data.id	`number`	The id of the update source request to identify the paired start and completion event. The start event is 'onUpdateSourceInit' and completion events are 'onUpdateSourceSuccess', 'onUpdateSourceFail' and 'onUpdateSourceAbort'
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onUpdateSourceFail = function (event) {
    console.log('update source fail with entry: ' + JSON.stringify(event.data.entry) + ', with error code: ' + event.data.code + ' and error message: ' + event.data.message);
    console.log('update source tag: ' + event.data.tag);
    console.log('update source count: ' + event.data.count);
};
config.events.onUpdateSourceFail = onUpdateSourceFail;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onUpdateSourceAbort"

The event to signal that the update source request is aborted. Reasons can be an equal source ('equalsource'), a superseding ('superseded') or an to less time range between two 'updateSource' calls ('frequency'). This is an completion event that follows on an start event.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.source	`object`	The current source object.
data.entry	`object`	The current source entry.
data.rule	`string`	The adaption switch rule.
data.reason	`string`	The abort reason. Possible values are 'equalsource', 'superseded' and 'frequency'.
data.tag	`string`	The custom tag string given in the options object of the 'updateSource' call. Is an empty string if not set.
data.count	`number`	The count of the update source request to identify the paired start and completion event. The start event is 'onUpdateSourceInit' and completion events are 'onUpdateSourceSuccess', 'onUpdateSourceFail' and 'onUpdateSourceAbort'
data.type	`string`	The switch type. Here always 'update'.
data.id	`number`	The id of the update source request to identify the paired start and completion event. The start event is 'onUpdateSourceInit' and completion events are 'onUpdateSourceSuccess', 'onUpdateSourceFail' and 'onUpdateSourceAbort'
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onUpdateSourceAbort = function (event) {
    console.log('update source abort with entry: ' + JSON.stringify(event.data.entry) + ' and reason: ' + event.data.reason);
    console.log('tag: ' + event.data.tag);
    console.log('count: ' + event.data.count);
};
config.events.onUpdateSourceAbort = onUpdateSourceAbort;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onSwitchStreamInit"

The event to signal that an stream switch request is initialized. Can be triggered by an adaptive rule (ABR) request or via 'switchStream'. This is always the start event, an completion event will follow.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.source	`object`	The current source object.
data.entry	`object`	The current source entry.
data.rule	`string`	The adaption switch rule.
data.options	`object`	The switch options object.
data.tag	`string`	A static string in format: "data.entry.h5live.rtmp.streamname + ' streamSwitch ' + data.id".
data.count	`number`	The count of the switch stream request to identify the paired start and completion event. The start event is 'onSwitchStreamInit' and completion events are 'onSwitchStreamSuccess', 'onSwitchStreamFail' and 'onSwitchStreamAbort'
data.type	`string`	The switch type. Possible values are 'up', 'down' (in case of adaptive stream switch) and 'direct' (switch via 'switchStream').
data.id	`number`	The id of the switch stream request to identify the paired start and completion event. The start event is 'onSwitchStreamInit' and completion events are 'onSwitchStreamSuccess', 'onSwitchStreamFail' and 'onSwitchStreamAbort'
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onSwitchStreamInit = function (event) {
    console.log('switch stream init by rule ' + event.data.rule + ' from type ' + event.data.type + 'with entry: ' + JSON.stringify(event.data.entry) + ' and options: ' + JSON.stringify(event.data.options));
    console.log('switch stream tag: ' + event.data.tag);
    console.log('switch stream count: ' + event.data.count);
};
config.events.onSwitchStreamInit = onSwitchStreamInit;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onSwitchStreamSuccess"

The event to signal that the switch stream request is succeeded. Fires if the source is updated. This is an completion event that follows on an start event.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.source	`object`	The current source object.
data.entry	`object`	The current source entry.
data.rule	`string`	The adaption switch rule.
data.tag	`string`	A static string in format: "data.entry.h5live.rtmp.streamname + ' streamSwitch ' + data.id."
data.count	`number`	The count of the switch stream request to identify the paired start and completion event. The start event is 'onSwitchStreamInit' and completion events are 'onSwitchStreamSuccess', 'onSwitchStreamFail' and 'onSwitchStreamAbort'
data.type	`string`	The switch type. Possible values are 'up', 'down' (in case of adaptive stream switch) and 'direct' (switch via 'switchStream').
data.id	`number`	The id of the switch stream request to identify the paired start and completion event. The start event is 'onSwitchStreamInit' and completion events are 'onSwitchStreamSuccess', 'onSwitchStreamFail' and 'onSwitchStreamAbort'
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onSwitchStreamSuccess = function (event) {
    console.log('switch stream success by rule ' + event.data.rule + ' from type ' + event.data.type + 'with entry: ' + JSON.stringify(event.data.entry) + ' with tag: ' + event.data.tag + ' and count: ' + event.data.count);
};
config.events.onSwitchStreamSuccess = onSwitchStreamSuccess;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onSwitchStreamFail"

The event to signal that the switch stream request is failed. Fired if an error occure during the update. This is an completion event that follows on an start event.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data.source	`object`	The current source object.
data.entry	`object`	The current source entry.
data.rule	`string`	The adaption switch rule.
data.code	`object`	The error code. Similar to the errorcodes.
data.message	`object`	The error message.
data.tag	`string`	A static string in format: "data.entry.h5live.rtmp.streamname + ' streamSwitch ' + data.id".
data.count	`number`	The count of the switch stream request to identify the paired start and completion event. The start event is 'onSwitchStreamInit' and completion events are 'onSwitchStreamSuccess', 'onSwitchStreamFail' and 'onSwitchStreamAbort'
data.type	`string`	The switch type. Possible values are 'up', 'down' (in case of adaptive stream switch) and 'direct' (switch via 'switchStream').
data.id	`number`	The id of the switch stream request to identify the paired start and completion event. The start event is 'onSwitchStreamInit' and completion events are 'onSwitchStreamSuccess', 'onSwitchStreamFail' and 'onSwitchStreamAbort'
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onSwitchStreamFail = function (event) {
    console.log('switch stream fail by rule ' + event.data.rule + ' from type ' + event.data.type + 'with entry: ' + JSON.stringify(event.data.entry) + ' with error code: ' + event.data.code + ' and error message: ' + event.data.message);
    console.log('switch stream tag: ' + event.data.tag);
    console.log('switch stream count: ' + event.data.count);
};
config.events.onSwitchStreamFail = onSwitchStreamFail;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onSwitchStreamAbort"

The event to signal that the switch stream request is aborted. Reasons can be an equal source ('equalsource'), a superseding ('superseded') or an to less time range between two 'switchStream' calls ('frequency'). This is an completion event that follows on an start event.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.source	`object`	The current source object.
data.entry	`object`	The current source entry.
data.rule	`string`	The adaption switch rule.
data.reason	`string`	The abort reason. Possible values are 'equalsource', 'superseded' and 'frequency'.
data.tag	`string`	A static string in format: "data.entry.h5live.rtmp.streamname + ' streamSwitch ' + data.id."
data.count	`number`	The count of the switch stream request to identify the paired start and completion event. The start event is 'onSwitchStreamInit' and completion events are 'onSwitchStreamSuccess', 'onSwitchStreamFail' and 'onSwitchStreamAbort'
data.type	`string`	The switch type. Possible values are 'up', 'down' (in case of adaptive stream switch) and 'direct' (switch via 'switchStream').
data.id	`number`	The id of the switch stream request to identify the paired start and completion event. The start event is 'onSwitchStreamInit' and completion events are 'onSwitchStreamSuccess', 'onSwitchStreamFail' and 'onSwitchStreamAbort'
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onSwitchStreamAbort = function (event) {
    console.log('switch stream abort by rule ' + event.data.rule + ' from type ' + event.data.type + 'with entry: ' + JSON.stringify(event.data.entry) + ' with reason: ' + event.data.reason));
    console.log('tag: ' + event.data.tag);
    console.log('count: ' + event.data.count);
};
config.events.onSwitchStreamAbort = onSwitchStreamAbort;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onServerInfo"

The server info event to pass in the 'config.events' object at the setup call. Fires if informations about the connected h5live server is available.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.serverInfo	`object`	The server info object.
data.serverInfo.applicationServerName	`string`	The application name of the h5live server.
data.serverInfo.applicationServerVersion	`object`	The application version of the h5live server.
data.serverInfo.hostname	`string`	The hostname of the h5live server.

Example

// player instance of NanoPlayer
var onServerInfo = function (event) {
    console.log('ServerInfo: ' + JSON.stringify(event.data.serverInfo));
};
config.events.onServerInfo = onServerInfo;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onFullscreenChange"

The fullscreen change event to pass in the 'config.events' object at the setup call. Fires if the fullscreen mode of the player has changed.

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.entered	`boolean`	Indicates if the player has entered fullscreen mode.
state	`state`	The player state.

Example

// player instance of NanoPlayer
var onFullscreenChange = function (event) {
    console.log('FullscreenChange');
    if (event.data.entered === true) {
         console.log('Fullscreen Mode Entered');
    }
};
config.events.onFullscreenChange = onFullscreenChange;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

"onActiveVideoElementChange"

The event that fires when the active video element for playback has been created and if the element has been changed in case of a stream switch on iOS (HLS playback on iOS requires two video elements for a smooth stream switch behaviour).

Kind: event emitted by NanoPlayer
See: config

Properties

Name	Type	Description
name	`string`	The event name.
player	`string`	The player name (id of the playerDiv).
id	`string`	The unique id of the player instance.
version	`string`	The version of the player.
data	`object`	The data object.
data.activeVideoElement	`HTMLVideoElement`	The current active video element. IMPORTANT: Video elements should be treated as read-only and not be altered via properties or method calls.
data.videoElementList	`Array.HTMLVideoElement`	The list of available video elements. Has two elements in case of iOS playback. IMPORTANT: Video elements should be treated as read-only and not be altered via properties or method calls.

Example

// player instance of NanoPlayer
var onActiveVideoElementChange = function (event) {
    var activeVideoElement = event.data.activeVideoElement;
    var videoElementList = event.data.videoElementList;
    // IMPORTANT: Video elements should be treated as read-only and not be altered via properties or method calls.
    if (activeVideoElement) {
        console.log('ActiveVideoElementChange: The current active video element has the id: \'' + activeVideoElement.id + '\'');
    }
    for (var i = 0; i < videoElementList.length; i += 1) {
        console.log('ActiveVideoElementChange: The video element at index ' + i + ' has the id \'' + videoElementList[i].id + '\'');
    }
};
config.events.onActiveVideoElementChange = onActiveVideoElementChange;
player.setup(config).then(function (config) {
    console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
    console.log(error);
});

NanoPlayer~config : `object`

The config object to pass as param for the 'setup' call.

Kind: inner typedef of NanoPlayer
See: NanoPlayer.setup

Properties

Name	Type	Default	Description
source	`object`		The object to configure the source to play, one of the following properties have to be set.
[source.entries]	`Array.<entry>`		The source entries array for a set of streams. USE INSTEAD OF SOURCE.H5LIVE. Used to configure stream entries. Can have one to many 'entry' objects. Only one existing entry is similar than a single source. In this case no entries options are needed.
[source.startIndex]	`number`	`0`	The index of the entry to start playback with. Can be in the range from 0 to 'entries.length-1'.
[source.defaults]	`object`		The object to configure the source entries defaults.
[source.defaults.service]	`string`		The defaults service. If a service is set, the `h5live.server` object and the `h5live.rtmp.url` in each entry can be omitted. In this case defaults will be applied internally. Values for `h5live.server` and/or `h5live.rtmp.url` that are defined explicitly in the entry have priority. The available value for `defaults.service` is `'bintu'` for using the standard nanoStream Cloud.
[source.group]	`object`		The object to configure a bintu stream group.
[source.group.id]	`string`		The stream group id.
[source.group.apiurl]	`string`		The bintu apiurl.
[source.group.startQuality]	`string`		The start quality. Will be mapped to a valid `startIndex`. Possible values are: `'high'`, `'medium-high'`, `'medium'`, `'medium-low'`, `'low'`. If not set the general `startIndex` of the source will be used (default: `0` ~ `'high'`)
[source.group.security]	`object`		The security object of the group.
[source.group.security.jwtoken]	`string`		The JSON Web Token for security.
[source.general]	`object`		The object to configure general values.
[source.general.serverDomain]	`string`		The general server domain. It has highest prio and will override/modify all h5live server domains. Possible values are e.g. `bintu-play-eu.nanocosmos.de` or `bintu-play-ass.nanocosmos.de`.
[source.options]	`object`		The object to configure the source entries options.
[source.options.switch]	`object`		The object to configure the stream switch options like method etc.
[source.options.switch.method]	`string`	`"server"`	The update method. Possible values are 'server' (default) and 'client'.
[source.options.switch.pauseOnError]	`boolean`	`false`	If set the player stops if an error occure during the stream switch. Default is false.
[source.options.switch.forcePlay]	`boolean`	`true`	If set the player starts playback in case the player is paused. Default is true.
[source.options.switch.fastStart]	`boolean`	`false`	DEPRECATED. Only if method is 'server'. Tries to accelerate the startup time of the new source. Default is false.
[source.options.switch.timeout]	`number`	`20`	The timeout for the update source request in seconds. If reached the error 4006 will thrown in the 'onUpdateSourceFail' and the 'onSwitchStreamFail' event. Default is 20 seconds, valid range is between 5 and 30.
[source.options.switch.tag]	`string`		A custom field that can be any string like 'stream-800k' or '720p'. This tag will be returned in any completion event of the 'updateSource' request like 'onUpdateSourceSuccess', 'onUpdateSourceFail' and 'onUpdateSourceAbort'.
[source.options.adaption]	`object`		The object to set an adaption for switching.
[source.options.adaption.rule]	`string`	`"none"`	The switch rule if multiple entries are defined. Possible values are 'deviationOfMean' (ABR automatic), 'deviationOfMean2' (ABR automatic) and 'none' (default, means only manual stream switch via 'switchStream' possible).
[source.options.adaption.downStep]	`number`	`1`	The minimum number of steps during a ABR down switch ('deviationOfMean' and 'deviationOfMean2' only).
[source.options.adaption.omitRenditions]	`Array.<string\|number>`		The renditions to omit if ABR enabled ('deviationOfMean' and 'deviationOfMean2' only). This parameter accepts an `array` of valid stream group qualities (e.g., `'high'`, `'medium'`, `'low'`) or stream entry indexes (e.g., `0`, `1`, `2`, etc.).
[source.h5live]	`object`		DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. The h5live object to configure the h5live connection.
source.h5live.server	`object`		The h5live server object.
[source.h5live.server.websocket]	`string`		The h5live websocket url.
[source.h5live.server.progressive]	`string`		The h5live progressive download url.
[source.h5live.server.hls]	`string`		The h5live hls url. Have to be set for playback on iOS 10 or higher. iOS 9 or lower is not supported.
[source.h5live.token]	`string`		The h5live server token.
[source.h5live.rtmp]	`object`		The rtmp playout object for h5live playback.
source.h5live.rtmp.url	`string`		The rtmp playout url. Have to include the domain, port and application e.g. 'rtmp://example.com:80/live'.
source.h5live.rtmp.streamname	`string`		The rtmp streamname.
[source.h5live.security]	`object`		The h5live security object for h5live playback.
source.h5live.security.token	`string`		The security service token.
source.h5live.security.expires	`string`		The time the token expires (system time).
source.h5live.security.options	`string`		The security options.
source.h5live.security.tag	`string`		The custom tag to decrypt the token.
[source.h5live.params]	`object`		The params object to pass custom query parameters over the h5live server connection. Parameters can be passed as key/value pairs.
[source.bintu]	`object`		DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. An bintu object to get sources.
source.bintu.streamid	`string`		The bintu stream id.
[source.bintu.apiurl]	`string`	`"https://bintu.nanocosmos.de"`	The bintu api url.
[source.hls]	`string`		DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. An hls playout url as string.
[playback]	`object`		The object to configure the playback.
[playback.autoplay]	`boolean`	`true`	Enable/disable autoplay (default: true). IMPORTANT: Browsers (mostly mobile) with stricter autoplay policy only allow autoplay with muted audio or within a user interaction (tap, click etc.). To allow autoplay in this case set the 'muted' property to 'true'. See our nanocosmos-blog for more informations.
[playback.automute]	`boolean`	`false`	Enable/disable automute (default: false). IMPORTANT: Browsers (mostly mobile) with stricter autoplay policy only allow autoplay with muted audio or within a user interaction (tap, click etc.). With 'autoplay = true' and this option enabled the player will be muted to allow autoplay in case the browsers policy restricted autoplay.
[playback.muted]	`boolean`	`false`	Mute/unmute the player (default: false). IMPORTANT: Browsers (mostly mobile) with stricter autoplay policy only allow autoplay with muted audio. To allow autoplay set the 'muted' property to 'true'. See property 'autoplay' for more informations.
[playback.latencyControlMode]	`string`	`"classic"`	The latency control mode of the player - possible values: "classic", "fastadaptive", "balancedadaptive"
[playback.metadata]	`boolean`	`false`	Enable/disable metadata (default: false).
[playback.forceTech]	`string`		Force the player to use this tech - possible values: "h5live", "flash", "hls.native"
[playback.flashplayer]	`string`		A absolute or relative path to the "nano.player.swf". If not set the player will be required from the base path.
[playback.videoId]	`string` \| `Array.string`		One or two element ids of existing video tags that should be used for playback. No new element(s) will be created and after destroy it/they will be kept. Can be a string (old, only one element) or a string array with one or two (HLS PLAYBACK ONLY!) element ids. Two video elements are required only for stream switching on iOS, MSE playback uses only one video tag. If only one element id is given on iOS the second video tag will be created by the player.
[playback.keepConnection]	`boolean`	`false`	If enabled the player will have always a connection to the h5live server. NOTE: not recommended for general use
[playback.allowSafariHlsFallback]	`boolean`	`false`	If enabled the player will select the playback method in Safari Mac OS X and utilize H5Live low latency HLS if appropriate.
[playback.crossOrigin]	`string`	`"not-set"`	Sets or disables the native "crossOrigin" attribute for all internal video elements and images (poster). Possible values are "anonymous", "use-credentials" and "not-set" (default). If "not-set" is used the attribute will not be added.
[playback.mediaErrorRecoveries]	`number`	`3`	The number of allowed media error recoveries within a minute. If threshold is reached the last error will be thrown and playback pauses. Possible recoverable error codes are 3003 (decode error), 3100 (media source ended) and 1008 (hls playback error). See errorcodes.
[playback.metadataLowDelay]	`boolean`	`true`	If enabled this mode for metadata processing is preventing occasionally delayed metadata on iOS. To use legacy mode set to false. The setting `playback.metadata` has to be enabled. HLS PLAYBACK ONLY
[playback.faststart]	`boolean`	`false`	If enabled the fast start mode is reducing the time to first frame and the playback start time.
[playback.reconnect]	`object`		The reconnect object to configure the reconnect settings. See errorcodes for reconnect possibility.
playback.reconnect.minDelay	`number`	`2`	The minimum time to reconnect in seconds. The lowest possible value is 1 sec.
playback.reconnect.maxDelay	`number`	`10`	The maximum time to reconnect in seconds.
playback.reconnect.delaySteps	`number`	`10`	This number of steps till the maximum delay should reached.
playback.reconnect.maxRetries	`number`	`10`	The maximum count of reconnect tries. If set to zero no reconnect will be done.
[playback.timeouts]	`object`		The timeouts object to configure the timeouts for playback.
playback.timeouts.loading	`number`	`20`	The timeout for the loading state in seconds, range from 10 - 60 seconds. If reached the player will be stopped with reason 'streamnotfound' and error 2001 will be thrown. Will be cleared if player goes to playing state.
playback.timeouts.buffering	`number`	`20`	The timeout for the buffering state in seconds, range from 10 - 60 seconds. If reached the player will be stopped with reason 'buffer' and error 2002 will be thrown. Will be cleared if player goes to playing state again.
playback.timeouts.connecting	`number`	`5`	The timeout for establishing the websocket connection, range from 5 - 30 seconds. If reached the player will be stopped with reason 'connectionclose' and error 4106 will be thrown. WEBSOCKET ONLY, FOR HLS PLAYBACK ONLY IF METADATA IS ENABLED
[style]	`object`		The object to configure the style of the player.
[style.width]	`string`	`"640px"`	The width of the player in pixels (e.g 320px) or percentage (80%) (height or aspectratio have to be set too). Use 'auto' to keep the parents size (height and aspectratio have no effect).
[style.height]	`string`		The height of the player in pixels (e.g 240px) or percentage (45%) (width or aspectratio have to be set too). Use 'auto' to keep the parents size (width and aspectratio have no effect).
[style.aspectratio]	`string`	`"16/9"`	The aspectratio of the player (e.g. 16/9) (width or height have to be set too).
[style.controls]	`boolean`	`true`	Show/hide video controls.
[style.interactive]	`boolean`	`true`	Enable/disable interactivity of the player on click/touch.
[style.view]	`boolean`	`true`	Enable/disable view port handling/animations.
[style.scaling]	`string`	`"letterbox"`	Set's the display mode for the video inside the player - possible values: "letterbox", "fill", "crop", "original", "resize".
[style.keepFrame]	`boolean`	`true`	If true the last played frame will be displayed after a pause.
[style.displayAudioOnly]	`boolean`	`true`	If true a audio symbol will be shown in case of a stream with audio only.
[style.audioPlayer]	`boolean`	`false`	If true a player will be created as an audio player without video functionality. Controls can be enabled/disabled. The size can be customized via 'width' and 'height'. Default is 640px *51px.
[style.displayMutedAutoplay]	`boolean`	`true`	If true a muted audio symbol will be shown in case of muted autoplay.
[style.fullScreenControl]	`boolean`	`true`	If true shows fullscreen control symbol in player controls.
[style.backgroundColor]	`string`	`"black"`	Sets the background color of the video element - possible values: html colors ("red", "blue", ...), hex color codes ("#FACAFD", "#FCEC66", ...) and rgba color values ("rgba(255,0,0,1)", "rgba(0,255,0,0.7)", ...).
[style.centerView]	`boolean`	`true`	Enable/disable the animations and icons in the center of the player's view.
[style.symbolColor]	`string`	`"rgba(244,233,233,1)"`	Sets the color of the symbols used in centerView and controls - The given color string can be a valid css (case insensitive) keyword, hex code with/without alpha, rgb, rgba, hsl or hsla. Example values: "white", "#ffffff", "rgba(237,125,14,0.5)".
[style.controlBarColor]	`string`	`"rgba(0,0,0,0.5)"`	Sets the color of the control bar - The given color string can be a valid css (case insensitive) keyword, hex code with/without alpha, rgb, rgba, hsl or hsla. Example values: "white", "#ffffff", "rgba(237,125,14,0.5)".
[style.buttonAnimation]	`boolean`	`true`	If true all buttons have short animations at 'mouseover' and 'click'.
[style.buttonHighlighting]	`boolean`	`true`	If true all buttons are slightly highlighted at hover.
[style.buttonCursor]	`string`	`"pointer"`	Sets the cursor of all buttons. Possible values are valid css cursor values like 'default' or 'pointer'.
[style.poster]	`string`		Sets a poster image to the player that is visible before and after playback. That can be every valid source of an IMG element. Valid sources are e.g. './assets/poster.png' or 'https://[YOURDOMAIN]/assets/poster.gif'. The poster will be displayed 'letterbox'.
[style.fullScreenBackgroundColor]	`string`	`"inherit"`	Sets the background color in fullscreen mode of the video element. If not set it inherits from `style.backgroundColor` - possible values: html colors ("red", "blue", ...), hex color codes ("#FACAFD", "#FCEC66", ...) and rgba color values ("rgba(255,0,0,1)", "rgba(0,255,0,0.7)", ...).
[events]	`object`		The object to set handlers to the player events.
[events.onReady]	`function`		Fires if the player is ready to play after successful setup.
[events.onPlay]	`function`		Fires if playout is started.
[events.onPause]	`function`		Fires if playout is paused.
[events.onLoading]	`function`		Fires if playout was stopped or player is ready after setup and tries to play.
[events.onStartBuffering]	`function`		Fires if playout is started but no media is available.
[events.onStopBuffering]	`function`		Fires if playout resumes after buffering.
[events.onError]	`function`		Fires if any kind of error occures.
[events.onStats]	`function`		Fires if the player has measured statistics.
[events.onMetaData]	`function`		Fires if the player has received metadata.
[events.onMute]	`function`		Fires if the player is muted.
[events.onUnmute]	`function`		Fires if the player is unmuted.
[events.onVolumeChange]	`function`		Fires if the player's volume has changed.
[events.onStreamInfo]	`function`		Fires if stream info is available.
[events.onStreamInfoUpdate]	`function`		Fires if stream info of a stream is updated during playback.
[events.onWarning]	`function`		Fires if something is not as expected, but functionality works.
[events.onDestroy]	`function`		Fires if the player is destroyed.
[events.onUpdateSourceInit]	`function`		Fires if the player has received an update source request.
[events.onUpdateSourceSuccess]	`function`		Fires if the player has successfully updated the source.
[events.onUpdateSourceFail]	`function`		Fires if the player has failed to update the source.
[events.onUpdateSourceAbort]	`function`		Fires if the player aborted the update source request.
[events.onServerInfo]	`function`		Fires if h5live server info is available.
[events.onFullscreenChange]	`function`		Fires if the fullscreen mode of the player has changed.
[tweaks]	`object`		The object to tweak the player (only h5live).
[tweaks.buffer]	`object`		The buffer tweak object. NOTE: Changing the values can result in unstable playback. The values have to ascend in the correct order ('min' < 'start' < 'target' < 'limit' < 'max') to avoid unusual playback behaviour. Differences between 'min' & 'start', 'min' & 'target', 'target' & 'limit' have to be significant enough.
tweaks.buffer.min	`number`	`0.2`	The minimum buffer in seconds. If buffer underrun occurs while playing and reaches this value, buffering initiates until the 'start' value is reached for playback to resume. It should be significantly lower than 'start'.
tweaks.buffer.start	`number`	`0.5`	The start buffer in seconds. Playback starts at this buffer value upon the play call. It should be lower or equal than 'target'.
tweaks.buffer.target	`number`	`1.2`	The target buffer in seconds. This value is aimed for if the buffer reaches 'limit' or 'max'. It ensures stable playback. It should be significantly lower than 'limit'.
tweaks.buffer.limit	`number`	`1.7`	The limit buffer in seconds. Smooth latency reduction occurs if this value is reached, moving towards'target'. It should be significantly higher than 'target'.
tweaks.buffer.max	`number`	`8.0`	The absolute maximum buffer in seconds. Upon reaching this value, a hard seek to 'target' is performed. It should be significantly higher than 'limit'.
[tweaks.bufferDynamic]	`object`		The buffer dynamic tweak object.
tweaks.bufferDynamic.offsetThreshold	`number`		The threshold time between two bufferings in seconds. If the measured value is lower, the buffer will be increased by offsetStep.
tweaks.bufferDynamic.offsetStep	`number`		The step to increase in seconds. Also the step to decrease in cooldown.
tweaks.bufferDynamic.cooldownTime	`number`		The time to check stable playback. If stable playback is detected, the buffer values will be decreased till original buffer values are reached.
[metrics]	`object`		The metrics object. Only usable with valid account. Configuring this object allows you to collect and analyse data via the 'nanoStream Cloud'. If not set, metrics are disabled. See our nanocosmos / nanoStream documentation for more informations.
metrics.accountId	`string`		The account id provided by nanocosmos to use with the metrics.
metrics.accountKey	`string`		The account key provided by nanocosmos to use with the metrics.
[metrics.userId]	`string`		Application user/viewer id. If your application includes a user name or user id, providing this information enables you to filter or aggregate data by this user.
[metrics.eventId]	`string`		Application event id. If the stream is related to a certain event, e.g. webinar, auction or sports event, providing this information enables you to filter or aggregate data by this event.
[metrics.statsInterval]	`number`	`10`	The interval how often the stats should be collected in seconds. The minimum is 5 seconds..
[metrics.customField*]	`string`		Custom field.* can be replaced with 1 - 10 e.g. 'customField3'. Possible from 'customField1' to 'customField10'.

Example

// stream group config example
var config = {
    "source" : {
        "group": {
            "id": "3b6cca80-91ca-49f1-b7da-6486317ac077",
            "startQuality": "low"
        }
    },
    "playback": {
        "autoplay": true,
        "automute": true,
        "muted": false,
        "metadata": true,
        "faststart": true,
        "latencyControlMode": 'balancedadaptive'
    },
    "events": {
        "onError": function (e) {
            console.log(e);
        }
    },
    "style": {
        "width": 'auto',
        "height": 'auto'
    }
};

Example

// example with bintu as default service
var config = {
    "source": {
        "defaults": {
            "service": 'bintu'
        },
        "entries": [ // array of 'entry' objects
                {
                    "index": 0,
                    "label": "high",
                    "h5live": {
                        "rtmp": {
                            "streamname": "XXXXX-YYYY1"
                        }
                    }
                },
                {
                    "index": 1,
                    "label": "medium",
                    "h5live": {
                        "rtmp": {
                            "streamname": "XXXXX-YYYY2"
                        }
                    }
                },
                {
                    "index": 2,
                    "label": "low",
                    "h5live": {
                        "rtmp": {
                            "streamname": "XXXXX-YYYY3"
                        }
                    }
                }
        ],
        "options": {
            "adaption": {
                "rule": "deviationOfMean2"
            }
        },
        "startIndex": 2 // lowest
    },
    "playback": {
        "autoplay": true,
        "automute": true,
        "muted": false,
        "faststart": true,
        "latencyControlMode": 'balancedadaptive'
    },
    "events": {
        "onStats": function (e) {
            console.log(e);
        }
    },
    "style": {
       view: false
    },
    "metrics": {
        "accountId": 'myId',
        "accountKey": 'sdfhe457zsjhnrtzd8'
    }
};

Example

// complete config example
var config = {
    "source" : {
        "entries": [ // array of 'entry' objects
                {
                    "index": 0,
                    "label": "high",
                    "tag": "this is a high quality stream",
                    "info": {
                        "bitrate": 1200,
                        "width": 1280,
                        "height": 720,
                        "framerate": 30
                    },
                    "hls": "",
                    "h5live": {
                        "rtmp": {
                            "url": "rtmp://bintu-play.nanocosmos.de/play",
                            "streamname": "XXXXX-YYYY1"
                        },
                        "server": {
                            "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                            "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                            "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                        },
                        "token": "",
                        "security": {}
                    },
                    "bintu": {}
                },
                {
                    "index": 1,
                    "label": "medium",
                    "tag": "this is a medium quality stream",
                    "info": {
                        "bitrate": 800,
                        "width": 864,
                        "height": 480,
                        "framerate": 30
                    },
                    "hls": "",
                    "h5live": {
                        "rtmp": {
                            "url": "rtmp://bintu-play.nanocosmos.de/play",
                            "streamname": "XXXXX-YYYY2"
                        },
                        "server": {
                            "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                            "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                            "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                        },
                        "token": "",
                        "security": {}
                    },
                    "bintu": {}
                },
                {
                    "index": 2,
                    "label": "low",
                    "tag": "this is a low quality stream",
                    "info": {
                        "bitrate": 400,
                        "width": 426,
                        "height": 240,
                        "framerate": 15
                    },
                    "hls": "",
                    "h5live": {
                        "rtmp": {
                            "url": "rtmp://bintu-play.nanocosmos.de/play",
                            "streamname": "XXXXX-YYYY3"
                        },
                        "server": {
                            "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                            "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                            "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                        },
                        "token": "",
                        "security": {}
                    },
                    "bintu": {}
                }
        ],
        "options": {
            "adaption": {
                "rule": "deviationOfMean2",
                "downStep": 2
            },
            "switch": {
                'method': 'server',
                'pauseOnError': false,
                'forcePlay': true,
                'fastStart': false,
                'timeout': 20
            }
        },
        "startIndex": 2 // lowest
    },
    // playback is completely optional
    "playback": {
        "autoplay": true,
        "automute": true,
        "muted": false,
        "faststart": true,
        "latencyControlMode": 'balancedadaptive',
        "metadata": true,
        "reconnect": {
            "minDelay": 2.5,
            "maxDelay": 12.5,
            "delaySteps": 6,
            "maxRetries": 20
        },
        "videoId": ['myVideoTagId', 'myVideoTagId']
    },
    "events": {
        "onWarning": function (e) {
            console.log(e);
        }
    },
    "style": {
        "width": '1280px',
        "height": '720px'
    },
    // optional buffer tweaks, use with care, usually not required
    "tweaks": {
        "buffer": {
            "min": 0.2,
            "start": 0.5,
            "max": 8.0,
            "target": 1.2,
            "limit": 1.7
        }
    },
    // metrics/analytics (requires account)
    "metrics": {
        "accountId": 'myId',
        "accountKey": 'sdfhe457zsjhnrtzd8',
        "userId": 'myUserId',
        "eventId": 'myEventId',
        "statsInterval": 10,
        "customField1": 'custom',
        "customField2": 42,
        "customField3": true
    }
};

Example

var config = {
    "source" : {
        "entries": [ // array of 'entry' objects, here only one is defined as single source
                {
                    "index": 0,
                    "label": "high", // optional
                    "tag": "this is a high quality stream", // optional
                    "info": { // optional
                        "bitrate": 1200,
                        "width": 1280,
                        "height": 720,
                        "framerate": 30
                    },
                    "hls": "",
                    "h5live": {
                        "rtmp": {
                            "url": "rtmp://bintu-play.nanocosmos.de/play",
                            "streamname": "XXXXX-YYYYY"
                        },
                        "server": {
                            "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                            "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                            "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                        },
                        // (optional) secure token
                        "security": {
                            "token": 'awe456b367g4e6rm8f56hbe6gd8f5m8df6n8idf6tf8mfd68ndi',
                            "expires": '1519819200',
                            "options": '15',
                            "tag": 'anyTag'
                        }
                    }
                }
        ],
        "options": { // optional
            "adaption": {
                "rule": "none"
            }
        },
        "startIndex": 0 // optional
    },
    "playback": {
        "autoplay": true,
        "muted": true
    },
    "events": {
        "onReady": function (e) {
            console.log('player ready with ' + JSON.stringify(e));
        },
        "onPlay": function (e) {
            console.log('playing');
            console.log('play stats: ' + JSON.stringify(e.data.stats));
        },
        "onPause": function (e) {
            console.log('pause');
            if (e.data.reason !== 'normal') {
                alert('Paused with reason: ' + e.data.reason);
            }
        },
        "onError": function (e) {
            try {
                var err = JSON.stringify(e);
                if (err === '{}') {
                    err = e.message;
                }
                e = err;
            } catch (err) { }
            console.log(e);
            alert(e);
        },
        "onMetaData": function (e) {
            console.log(e);
        },
        "onStats": function (e) {
            console.log(e);
        },
        "onStreamInfo": function (e) {
            console.log(e);
        },
        "onDestroy": function (e) {
            console.log(e);
        }
    },
    "style": {
        "width: '1280px',
        "aspectratio": '16/9',
        "controls": false,
        "scaling": 'crop'
    }
};

NanoPlayer~entry : `object`

An entry object to pass stream parameters like h5live config, stream informations etc. in the 'config.source.entries' array

Kind: inner typedef of NanoPlayer
See: config

Properties

Name	Type	Default	Description
index	`number`		The index of the stream entry. Have to be the same as the position in the 'entries' array. Begins with '0'.
[label]	`string`		A custom label for the stream e.g. 'high'.
[tag]	`string`		Custom informations about the stream entry.
[info]	`object`		The info object to set stream meta data.
info.bitrate	`number`	`0`	The stream bitrate.
info.width	`number`	`0`	The stream width.
info.height	`number`	`0`	The stream height.
info.framerate	`number`	`0`	The stream framerate.
[hls]	`string`		An hls playout url as string.
[h5live]	`object`		The h5live object to configure the h5live connection.
h5live.server	`object`		The h5live server object.
h5live.server.websocket	`string`		The h5live websocket url.
[h5live.server.progressive]	`string`		The h5live progressive download url.
h5live.server.hls	`string`		The h5live hls url. Have to be set for playback on iOS 10 or higher. iOS 9 or lower is not supported.
[h5live.token]	`string`		The h5live server token.
h5live.rtmp	`object`		The rtmp playout object for h5live playback.
h5live.rtmp.url	`string`		The rtmp playout url. Have to include the domain, port and application e.g. 'rtmp://example.com:80/live'.
h5live.rtmp.streamname	`string`		The rtmp streamname.
[h5live.security]	`object`		The h5live security object for h5live playback.
h5live.security.token	`string`		The security service token.
h5live.security.expires	`string`		The time the token expires (system time).
h5live.security.options	`string`		The security options.
h5live.security.tag	`string`		The custom tag to decrypt the token.
[h5live.params]	`object`		The params object to pass custom query parameters over the h5live server connection. Parameters can be passed as key/value pairs.
[bintu]	`object`		An bintu object to get sources.
bintu.streamid	`string`		The bintu stream id.
[bintu.apiurl]	`string`	`"https://bintu.nanocosmos.de"`	The bintu api url.

Example

var source = {
    "entries": [
            {
                "index": 0,
                "label": "high",
                "tag": "this is a high quality stream",
                "info": {
                    "bitrate": 1200,
                    "width": 1280,
                    "height": 720,
                    "framerate": 30
                },
                "hls": "",
                "h5live": {
                    "rtmp": {
                        "url": "rtmp://bintu-play.nanocosmos.de/play",
                        "streamname": "XXXXX-YYYY1"
                    },
                    "server": {
                        "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                        "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                        "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                    },
                    "token": "",
                    "security": {}
                },
                "bintu": {}
            },
            {
                "index": 1,
                "label": "medium",
                "tag": "this is a medium quality stream",
                "info": {
                    "bitrate": 800,
                    "width": 864,
                    "height": 480,
                    "framerate": 30
                },
                "hls": "",
                "h5live": {
                    "rtmp": {
                        "url": "rtmp://bintu-play.nanocosmos.de/play",
                        "streamname": "XXXXX-YYYY2"
                    },
                    "server": {
                        "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                        "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                        "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                    },
                    "token": "",
                    "security": {}
                },
                "bintu": {}
            },
            {
                "index": 2,
                "label": "low",
                "tag": "this is a low quality stream",
                "info": {
                    "bitrate": 400,
                    "width": 426,
                    "height": 240,
                    "framerate": 15
                },
                "hls": "",
                "h5live": {
                    "rtmp": {
                        "url": "rtmp://bintu-play.nanocosmos.de/play",
                        "streamname": "XXXXX-YYYY3"
                    },
                    "server": {
                        "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                        "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                        "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                    },
                    "token": "",
                    "security": {}
                },
                "bintu": {}
            }
    ],
    "options": {
        "adaption": {
            "rule": "deviationOfMean2",
            "downStep": 1
        },
        "switch": {
            'method': 'server',
            'pauseOnError': false,
            'forcePlay': true,
            'timeout': 20
        }
    },
    "startIndex": 2 // lowest
};

Example

var source = {
    "entries": [
            {
                "index": 0,
                "label": "high", // optional
                "tag": "this is a high quality stream", // optional
                "info": { // optional
                    "bitrate": 1200,
                    "width": 1280,
                    "height": 720,
                    "framerate": 30
                },
                "h5live": {
                     // your rtmp stream
                    "rtmp": {
                        "url": "rtmp://bintu-play.nanocosmos.de/play",
                        "streamname": "XXXXX-YYYYY"
                    },
                    "server": {
                        "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                        "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                        "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                    },
                    // optional (secure token)
                    "security": {
                        "token": 'awe456b367g4e6rm8f56hbe6gd8f5m8df6n8idf6tf8mfd68ndi',
                        "expires": '1519819200',
                        "options": '15',
                        "tag": 'anyTag'
                    }
                }
            }
    ]
};

NanoPlayer~errorcode : `number`

The possible error codes in a onError event.

Kind: inner typedef of NanoPlayer
See: onError

Properties

Name	Type	Description
1000-1999	`PlayerError`
1001		No rtmp url set.
1002		No server set.
1003		Could not play because player has not been configured.
1004		Could not pause because player was not in playing state before.
1005		Playback must be initialized by user gesture.
1006		Buffer config is invalid.
1007		Playback suspended by external reason.
1008		Playback error.
1009		Playback failed because the player was in visibility state 'hidden' at load start.
1010		The given stream entry index is not valid. (see switchStream)
2000-2999	`StreamError`
2001		The requested stream can not be found.
2002		No media available.
2003		Not enough media data received. The stream was already connected and the stream info event was fired.
2004		The source stream has been stopped.
2011		Received metadata with wrong index.
2012		Received metadata with invalid json string.
2013		Received metadata but no start index.
2014		Received metadata with start index but currently process another.
3000-3999	`MediaError`
3001		A fetching process of the media aborted by user.
3002		An error occurred when downloading media.
3003		An error occurred when decoding media.
3004		The received audio/video is not supported.
3005		An error occurred while hls playback when decoding video.
3100		The media source extension changed the state to 'ended'. NOT AVAILABLE FOR HLS PLAYBACK.
3101		An error occurred while buffering on hls playback.
3102		Buffer range is higher than allowed on hls playback.
3200		An unspecific media error occurred.
4000-4999	`NetworkError`
4000-4099	`General`
4001		Could not establish connection. Maybe wrong protocol or path.
4002		Connection error.
4003		Maximum number of reconnection tries reached.
4004		Reconnection configuration invalid.
4005		The requested source stream has been stopped.
4006		The source request was aborted by timeout.
4100-4199	`WebSocket`
4101		An endpoint is "going away", such as a server going down or a browser having navigated away from a page.
4102		An endpoint is terminating the connection due to a protocol error. Reconnect possible.
4103		An endpoint is terminating the connection because it has received a type of data it cannot accept (e.g., an endpoint that understands only text data MAY send this if it receives a binary message). Reconnect possible.
4104		Reserved. The specific meaning might be defined in the future.
4105		No status code was actually present. Reconnect possible.
4106		Maybe no network, wrong url or server down. Reconnect possible.
4107		An endpoint is terminating the connection because it has received data within a message that was not consistent with the type of the message (e.g., non-UTF-8 [http://tools.ietf.org/html/rfc3629] data within a text message). Reconnect possible.
4108		An endpoint is terminating the connection because it has received a message that "violates its policy". This reason is given either if there is no other sutible reason, or if there is a need to hide specific details about the policy. Reconnect possible.
4109		An endpoint is terminating the connection because it has received a message that is too big for it to process. Reconnect possible.
4110		An endpoint (client) is terminating the connection because it has expected the server to negotiate one or more extension, but the server didn't return them in the response message of the WebSocket handshake.
4111		A server is terminating the connection because it encountered an unexpected condition that prevented it from fulfilling the request. Reconnect possible.
4115		The connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified). Reconnect possible.
4400-4499	`Http`
4400		Bad request. Maybe stream parameters are missing or malformed.
4403		Access denied. The authentication token is missing or invalid.
4500		The connection has been rejected due an internal server error. Reconnect possible.
4503		The requested service is currently unavailable. Reconnect possible.
4900-4999	`Security`
4900		The security service has been rejected due an internal server error.
4901		The security service denied access. The authentication token is invalid.
4903		The security service denied access. The url is expired or a token parameter is missing (expires, token, or options).
4904		The security service can not be found.
5000-5999	`SetupError`
5000-5099	`General`
5001		An exception was thrown during setup.
5002		This browser does not fully support HTML5 and H5Live. Supported are: Chrome >=54 (Windows, MacOSX, Android), Firefox >=48 (Windows, MacOSX, Android), Microsoft Edge (Windows), Microsoft Internet Explorer 11 (at least Windows 8), Safari (MacOSX & at least iOS 10).
5003		A forced tech is not supported by your browser.
5004		The players source configuration is malformed or missing.
5005		Configuration error. Could not create/update player, the rtmp configuration is missing or incomplete. Add an rtmp url and streamname to the configuration.
5006		Configuration error. Could not create/update player, with this configuration an security token is required. Add an token to the configuration.
5007		Configuration error. Could not create/update player, the websocket server configuration is missing.
5008		Configuration error. Could not create/update player, the hls server configuration is missing.
5009		Configuration error. Could not create/update player, the websocket server configuration for metadata is missing.
5010		Could not embed player.
5100-5199	`Bintu`
5101		Could not find bintu stream. The stream is not live.
5102		No bintu stream id passed.
5103		Bintu service rejected.
5200-5299	`Metrics`
5201		Metrics configuration error. No metrics config object passed.
5202		Metrics configuration error. Metrics config is not from type 'object'.
5203		Metrics configuration error. Metrics config is empty.
5204		Metrics configuration error. A custom property has no valid index number, the range is 1 to 10 e.g.'customField1'.
5205		Metrics configuration error. A custom property is not indexed correctly, the range is 1 to 10 e.g.'customField1'.
5206		Metrics configuration error. A custom property has an index out of range, the range is 1 to 10 e.g.'customField1'.
5207		Metrics configuration error. A property is not valid.
5208		Metrics configuration error. No credentials passed.

NanoPlayer~state : `number`

The state of the player.

Kind: inner typedef of NanoPlayer
See: Events

Properties

Name	Description
1	UNINITIALIZED
2	IDLE
3	READY
4	LOADING
5	PLAYING
6	PAUSED
7	BUFFERING
8	UNKNOWN
9	PLAYBACK_NOT_STARTED
10	PLAYBACK_SUSPENDED
11	PAUSING
12	PLAYBACK_ERROR
13	RECONNECTION_IMMINENT
14	CONNECTION_ERROR
15	DESTROYING
16	PLAYBACK_RESTARTING
17	VISIBILITY_HIDDEN
18	NOT_ENOUGH_DATA
19	SOURCE_STREAM_STOPPED

NanoPlayer~pausereason : `string`

The possible pause reason in a onPause event.

Kind: inner typedef of NanoPlayer
See: onPause

Properties

Name	Description
normal	Paused by user.
buffer	Paused by buffer timeout. The stream was stopped or there was a buffer underrun.
connectionclose	Paused by network connection close.
servernotfound	Paused because of the h5live server was not found.
streamnotfound	Paused by loading timeout. The stream could not found.
interactionrequired	Paused because auto playback is denied. Can happen especially on mobile.
playbacksuspended	Paused because the playback was suspended by an external reason.
playbackerror	Paused because the playback had an error.
reconnectionimminent	Paused because the connection was closed by an external reason and a reconnect will be prepared.
destroy	Paused because the player will be destroyed.
playbackrestart	Paused because the player was stopped for update source. The player will restart immediately.
visibilityhidden	Paused because the player was not visible at load start.
notenoughdata	Paused by loading timeout. The stream was alive and connected but not enough data was received to start playback.
sourcestreamstopped	Paused because the source stream has been stopped.

NanoPlayer​

new NanoPlayer(playerDivId)​

Example​

Example​

Example​

nanoPlayer.version : string​

nanoPlayer.coreversion : string​

nanoPlayer.viewversion : string​

nanoPlayer.type : string​

nanoPlayer.id : string​

nanoPlayer.capabilities : Array.<string>​

nanoPlayer.setup(config) ⇒ Promise.<(config|error)>​

Example​

nanoPlayer.destroy()​

Example​

nanoPlayer.play()​

Example​

nanoPlayer.pause()​

Example​

nanoPlayer.mute()​

Example​

nanoPlayer.unmute()​

Example​

nanoPlayer.setVolume(volume)​

Example​

nanoPlayer.updateSource(source) ⇒ Promise.<(config|error)>​

Example​

Example​

nanoPlayer.switchStream(index) ⇒ Promise.<(config|error)>​

Example​

nanoPlayer.setAdaption(adaption)​

Example​

nanoPlayer.requestFullscreen() ⇒ Promise.<(undefined|error)>​

Example​

nanoPlayer.exitFullscreen() ⇒ Promise.<(undefined|error)>​

Example​

"onReady"​

Properties​

Example​

"onPlay"​

Properties​

Example​

"onPause"​

Properties​

Example​

"onLoading"​

Properties​

Example​

"onStartBuffering"​

Properties​

Example​

"onStopBuffering"​

Properties​

Example​

"onError"​

Properties​

Example​

"onStats"​

Properties​

Example​

"onMetaData"​

Properties​

Example​

"onMute"​

Properties​

Example​

"onUnmute"​

Properties​

Example​

"onVolumeChange"​

Properties​

Example​

"onStreamInfo"​

Properties​

Example​

"onStreamInfoUpdate"​

Properties​

Example​

"onWarning"​

Properties​

NanoPlayer

new NanoPlayer(playerDivId)

Example

Example

Example

nanoPlayer.version : `string`

nanoPlayer.coreversion : `string`

nanoPlayer.viewversion : `string`

nanoPlayer.type : `string`

nanoPlayer.id : `string`

nanoPlayer.capabilities : `Array.<string>`

nanoPlayer.setup(config) ⇒ `Promise.<(config|error)>`

Example

nanoPlayer.destroy()

Example

nanoPlayer.play()

Example

nanoPlayer.pause()

Example

nanoPlayer.mute()

Example

nanoPlayer.unmute()

Example

nanoPlayer.setVolume(volume)

Example

nanoPlayer.updateSource(source) ⇒ `Promise.<(config|error)>`

Example

Example

nanoPlayer.switchStream(index) ⇒ `Promise.<(config|error)>`

Example

nanoPlayer.setAdaption(adaption)

Example

nanoPlayer.requestFullscreen() ⇒ `Promise.<(undefined|error)>`

Example

nanoPlayer.exitFullscreen() ⇒ `Promise.<(undefined|error)>`

Example

"onReady"

Properties

Example

"onPlay"

Properties

Example

"onPause"

Properties

Example

"onLoading"

Properties

Example

"onStartBuffering"

Properties

Example

"onStopBuffering"

Properties

Example

"onError"

Properties

Example

"onStats"

Properties

Example

"onMetaData"

Properties

Example

"onMute"

Properties

Example

"onUnmute"

Properties

Example

"onVolumeChange"

Properties

Example

"onStreamInfo"

Properties

Example

"onStreamInfoUpdate"

Properties

Example

"onWarning"

Properties