NanoPlayer

NanoPlayer

NanoPlayer (H5Live) Public API Class 4.24.1

Kind: global class Version: 4.24.1

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>
    <!-- iOS 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 IOS

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.
state	state	The player state.

Example

// player instance of NanoPlayer
var onError = function (event) {
    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 IOS.
data.stats.bitrate.avg	number	The average bitrate in Bit/s over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR IOS.
data.stats.bitrate.min	number	The minimum bitrate in Bit/s over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR IOS.
data.stats.bitrate.max	number	The maximum bitrate in Bit/s over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR IOS.
data.stats.framerate	object	The framerate object.
data.stats.framerate.current	number	The current network framerate. Is '0' if not available. NOT AVAILABLE FOR IOS.
data.stats.framerate.avg	number	The average network framerate over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR IOS.
data.stats.framerate.min	number	The minimum network framerate over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR IOS.
data.stats.framerate.max	number	The maximum network framerate over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR IOS.
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 IOS.
data.streamInfo.audioInfo.sampleRate	number | null	The audio sample rate. Is 'null' if not available. NOT AVAILABLE FOR IOS.
data.streamInfo.audioInfo.channels	number | null	The number of audio channels. Is 'null' if not available. NOT AVAILABLE FOR IOS.
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 IOS.

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 IOS.
data.streamInfo.audioInfo.sampleRate	number | null	The audio sample rate. Is 'null' if not available. NOT AVAILABLE FOR IOS.
data.streamInfo.audioInfo.channels	number | null	The number of audio channels. Is 'null' if not available. NOT AVAILABLE FOR IOS.
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 IOS.

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.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 (iOS 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. IOS 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 IOS 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 IOS.
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.