NanoPlayer

Class: NanoPlayer

NanoPlayer

NanoPlayer (H5Live) Public API Class 5.0.2

new NanoPlayer(playerDivId)

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

Parameters:
Name Type Description
playerDivId string

The div element the player will be embedded into.
Version:
  • 5.0.2
Examples
<!-- Example: load player with new video element into playerDiv -->
<div id="playerDiv"></div>
<script type="text/javascript" src="nanoplayer.5.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: load player with existing html video element -->
<div id="playerDiv">
    <video id="myPlayer"></video>
    <!-- HLS PLAYBACK ONLY uses 2 video elements for playback if more than one stream is configured, required for seamless stream switching -->
    <video id="myPlayer2"></video>
</div>
<script>
    var player;
    var config = {
        "source": {
            "entries": [
                {
                    "h5live": {
                         // your rtmp stream
                        "rtmp": {
                            "url": "rtmp://bintu-play.nanocosmos.de/play",
                            "streamname": "XXXXX-YYYYY"
                        },
                        "server": {
                            "websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
                            "hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
                            "progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
                        }
                    }
                }
            ]
        },
        "playback": {
            "videoId": ["myPlayer", "myPlayer2"]
        }
    };
    function initPlayer() {
        player = new NanoPlayer('playerDiv');
        player.setup(config).then(function (config) {
            console.log('setup ok with config: ' + JSON.stringify(config));
        }, function (error) {
            console.log(error);
        });
    }
    document.addEventListener('DOMContentLoaded', function () {
        initPlayer();
    });
</script>
<!-- Example: 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.5.min'
            // if 'baseUrl' is defined a local path have to be relative to the base path
            nanoplayer: '//demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.5.min.js'
        },
        waitSeconds: 20, // timeout for loading modules
    });
    require('nanoplayer', function() {
        initPlayer();
    });
</script>

Members

<constant> capabilities :Array.<string>

The supported tech names of the player.

Type:
  • Array.<string>

coreversion :string

The version of the core.

Type:
  • string

id :string

The unique id of the player.

Type:
  • string

tech :string

The playback technology of the player.

Type:
  • string

type :string

The type of the player.

Type:
  • string

version :string

The version of the player.

Type:
  • string

viewversion :string

The version of the view.

Type:
  • string

Methods

destroy()

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

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

exitFullscreen() → {Promise.<(undefined|error)>}

Exit fullscreen mode if entered.

Returns:
Type
Promise.<(undefined|error)>
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);
    });

mute()

Mutes the player.

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

pause()

Pauses the player.

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

play()

Plays the player.

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

requestFullscreen() → {Promise.<(undefined|error)>}

Request fullscreen mode for the player if not entered.

Returns:
Type
Promise.<(undefined|error)>
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);
    });

setAdaption(adaption)

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

Parameters:
Name Type Description
adaption object

The adaption object similar than the object 'config.source.options.adaption'.
See:
Example
// player instance of NanoPlayer
var adaption = {
    "rule": "deviationOfMean2",
    "downStep": 2,
    "omitRenditions": ["high", "low"]
}
if (!useAdaption) {
    adaption.rule = "none";
}
player.setAdaption(adaption);

setup(config) → {Promise.<(config|error)>}

Initializes the player with a given config object.

Parameters:
Name Type Description
config NanoPlayer~config

The config object for the player including sources, events, styles.
See:
Returns:
Type
Promise.<(config|error)>
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);
});

setVolume(volume)

Sets the volume of the player. NOT AVAILABLE FOR HLS PLAYBACK, see here for more informations.

Parameters:
Name 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);

switchStream(index) → {Promise.<(config|error)>}

Switch to a stream given over source entries.

Parameters:
Name Type Description
index number

The index of the stream in the given stream set to switch to.
See:
Returns:
Type
Promise.<(config|error)>
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);
});

unmute()

Unmutes the player.

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

updateSource(source) → {Promise.<(config|error)>}

Updates the source of the player.

Parameters:
Name Type Description
source object

The object to configure the source to play, one of the following properties have to be set.

Properties
Name Type Argument Default Description
entries Array.<NanoPlayer~entry> <optional>

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.
startIndex number <optional>
 0

The index of the entry to start playback with. Can be in the range from 0 to 'entries.length-1'.
options object <optional>

The object to configure the source entries options.

Properties
Name Type Argument Description
switch object <optional>

The object to configure the stream switch options like method etc.

Properties
Name Type Argument Default Description
method string <optional>
 server

The update method. Possible values are 'server' (default) and 'client'.
pauseOnError boolean <optional>
 false

If set the player stops if an error occure during the stream switch. Default is false.
forcePlay boolean <optional>
 true

If set the player starts playback in case the player is paused. Default is true.
fastStart boolean <optional>
 true

Only if method is 'server'. Tries to accelerate the startup time of the new source. Default is true.
timeout number <optional>
 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.
tag string <optional>

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'.
adaption object <optional>

The object to set an adaption for switching.

Properties
Name Type Argument Default Description
rule string <optional>
 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).
downStep number <optional>
 1

The minimum number of steps during a ABR down switch ('deviationOfMean' and 'deviationOfMean2' only).
h5live object <optional>

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.

Properties
Name Type Argument Description
server object

The h5live server object.

Properties
Name Type Argument Description
websocket string <optional>

The h5live websocket url.
progressive string <optional>

The h5live progressive download url.
hls string <optional>

The h5live hls url. Have to be set for playback on iOS 10 or higher. iOS 9 or lower is not supported.
token string <optional>

The h5live server token.
rtmp object <optional>

The rtmp playout object for h5live playback.

Properties
Name Type Description
url string

The rtmp playout url. Have to include the domain, port and application e.g. 'rtmp://example.com:80/live'.
streamname string

The rtmp streamname.
security object <optional>

The h5live security object for h5live playback.

Properties
Name Type Description
token string

The security service token.
expires string

The time the token expires (system time).
options string

The security options.
tag string

The custom tag to decrypt the token.
params object <optional>

The params object to pass custom query parameters over the h5live server connection. Parameters can be passed as key/value pairs.
bintu object <optional>

DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. An bintu object to get sources.

Properties
Name Type Argument Default Description
streamid string

The bintu stream id.
apiurl string <optional>
 https://bintu.nanocosmos.de

The bintu api url.
hls string <optional>

DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. An hls playout url as string.
See:
Returns:
Type
Promise.<(config|error)>
Examples
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,
            'fastStart': false,
            '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);
});
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);
});

Type Definitions

config

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

Type:
  • object
Properties:
Name Type Argument Description
source object

The object to configure the source to play, one of the following properties have to be set.

Properties
Name Type Argument Default Description
entries Array.<NanoPlayer~entry> <optional>

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.
startIndex number <optional>
 0

The index of the entry to start playback with. Can be in the range from 0 to 'entries.length-1'.
defaults object <optional>

The object to configure the source entries defaults.

Properties
Name Type Argument Description
service string <optional>

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.
group object <optional>

The object to configure a bintu stream group.

Properties
Name Type Argument Description
id string <optional>

The stream group id.
apiurl string <optional>

The bintu apiurl.
startQuality string <optional>

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')
security object <optional>

The security object of the group.

Properties
Name Type Argument Description
jwtoken string <optional>

The JSON Web Token for security.
general object <optional>

The object to configure general values.

Properties
Name Type Argument Description
serverDomain string <optional>

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.
options object <optional>

The object to configure the source entries options.

Properties
Name Type Argument Description
switch object <optional>

The object to configure the stream switch options like method etc.

Properties
Name Type Argument Default Description
method string <optional>
 server

The update method. Possible values are 'server' (default) and 'client'.
pauseOnError boolean <optional>
 false

If set the player stops if an error occure during the stream switch. Default is false.
forcePlay boolean <optional>
 true

If set the player starts playback in case the player is paused. Default is true.
fastStart boolean <optional>
 false

DEPRECATED. Only if method is 'server'. Tries to accelerate the startup time of the new source. Default is false.
timeout number <optional>
 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.
tag string <optional>

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'.
adaption object <optional>

The object to set an adaption for switching.

Properties
Name Type Argument Default Description
rule string <optional>
 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).
downStep number <optional>
 1

The minimum number of steps during a ABR down switch ('deviationOfMean' and 'deviationOfMean2' only).
omitRenditions Array.<(string|number)> <optional>

The renditions to omit if ABR enabled ('deviationOfMean' and 'deviationOfMean2' only). This parameter accepts an array of valid stream group qualities (e.g., "high", "medium", "low") or stream entry indexes (e.g., 0, 1, 2, etc.).
h5live object <optional>

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.

Properties
Name Type Argument Description
server object

The h5live server object.

Properties
Name Type Argument Description
websocket string <optional>

The h5live websocket url.
progressive string <optional>

The h5live progressive download url.
hls string <optional>

The h5live hls url. Have to be set for playback on iOS 10 or higher. iOS 9 or lower is not supported.
token string <optional>

The h5live server token.
rtmp object <optional>

The rtmp playout object for h5live playback.

Properties
Name Type Description
url string

The rtmp playout url. Have to include the domain, port and application e.g. 'rtmp://example.com:80/live'.
streamname string

The rtmp streamname.
security object <optional>

The h5live security object for h5live playback.

Properties
Name Type Description
token string

The security service token.
expires string

The time the token expires (system time).
options string

The security options.
tag string

The custom tag to decrypt the token.
params object <optional>

The params object to pass custom query parameters over the h5live server connection. Parameters can be passed as key/value pairs.
bintu object <optional>

DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. An bintu object to get sources.

Properties
Name Type Argument Default Description
streamid string

The bintu stream id.
apiurl string <optional>
 https://bintu.nanocosmos.de

The bintu api url.
hls string <optional>

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 <optional>

The object to configure the playback.

Properties
Name Type Argument Default Description
autoplay boolean <optional>
 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.
automute boolean <optional>
 true

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.
muted boolean <optional>
 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.
latencyControlMode string <optional>
 balancedadaptive

The latency control mode of the player - possible values: "classic", "fastadaptive", "balancedadaptive"
metadata boolean <optional>
 false

Enable/disable metadata (default: false).
enableMediaOverQuic string <optional>

Enable/disable Media Over Quic playback (default: true).
enableQuicConnectionProbe string <optional>

Enable/disable Media Over Quic connection probe (default: true). If Media Over Quic playback is disabled, the probe functionality is not used.
videoId string | Array.string <optional>

One or two element ids of existing video tags that should be used for playback. No new element(s) will be created and after destroy it/they will be kept. Can be a string (old, only one element) or a string array with one or two (HLS PLAYBACK ONLY!) element ids. Two video elements are required only for stream switching on iOS, MSE playback uses only one video tag. If only one element id is given on iOS the second video tag will be created by the player.
keepConnection boolean <optional>
 false

If enabled the player will have always a connection to the h5live server. NOTE: not recommended for general use
allowSafariHlsFallback boolean <optional>
 false

If enabled the player will select the playback method in Safari Mac OS X and utilize H5Live low latency HLS if appropriate.
crossOrigin string <optional>
 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.
mediaErrorRecoveries number <optional>
 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.
metadataLowDelay boolean <optional>
 true

If enabled this mode for metadata processing is preventing occasionally delayed metadata on iOS. To use legacy mode set to false. The setting playback.metadata has to be enabled. HLS PLAYBACK ONLY
faststart boolean <optional>
 true

If enabled the fast start mode is reducing the time to first frame and the playback start time.
reconnect object <optional>

The reconnect object to configure the reconnect settings. See errorcodes for reconnect possibility.

Properties
Name Type Default Description
minDelay number 2

The minimum time to reconnect in seconds. The lowest possible value is 1 sec.
maxDelay number 10

The maximum time to reconnect in seconds.
delaySteps number 10

This number of steps till the maximum delay should reached.
maxRetries number 10

The maximum count of reconnect tries. If set to zero no reconnect will be done.
timeouts object <optional>

The timeouts object to configure the timeouts for playback.

Properties
Name Type Default Description
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.
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.
connecting number 5

The timeout for establishing the websocket connection, range from 5 - 30 seconds. If reached the player will be stopped with reason 'connectionclose' and error 4106 will be thrown. WEBSOCKET ONLY, FOR HLS PLAYBACK ONLY IF METADATA IS ENABLED
style object <optional>

The object to configure the style of the player.

Properties
Name Type Argument Default Description
width string <optional>
 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).
height string <optional>

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).
aspectratio string <optional>
 16/9

The aspectratio of the player (e.g. 16/9) (width or height have to be set too).
controls boolean <optional>
 true

Show/hide video controls.
interactive boolean <optional>
 true

Enable/disable interactivity of the player on click/touch.
view boolean <optional>
 true

Enable/disable view port handling/animations.
scaling string <optional>
 letterbox

Set's the display mode for the video inside the player - possible values: "letterbox", "fill", "crop", "original", "resize".
keepFrame boolean <optional>
 true

If true the last played frame will be displayed after a pause.
displayAudioOnly boolean <optional>
 true

If true a audio symbol will be shown in case of a stream with audio only.
audioPlayer boolean <optional>
 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.
displayMutedAutoplay boolean <optional>
 true

If true a muted audio symbol will be shown in case of muted autoplay.
fullScreenControl boolean <optional>
 true

If true shows fullscreen control symbol in player controls.
backgroundColor string <optional>
 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)", ...).
centerView boolean <optional>
 true

Enable/disable the animations and icons in the center of the player's view.
symbolColor string <optional>
 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)".
controlBarColor string <optional>
 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)".
buttonAnimation boolean <optional>
 true

If true all buttons have short animations at 'mouseover' and 'click'.
buttonHighlighting boolean <optional>
 true

If true all buttons are slightly highlighted at hover.
buttonCursor string <optional>
 pointer

Sets the cursor of all buttons. Possible values are valid css cursor values like 'default' or 'pointer'.
poster string <optional>

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'.
fullScreenBackgroundColor string <optional>
 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 <optional>

The object to set handlers to the player events.

Properties
Name Type Argument Description
onReady function <optional>

Fires if the player is ready to play after successful setup.
onPlay function <optional>

Fires if playout is started.
onPause function <optional>

Fires if playout is paused.
onLoading function <optional>

Fires if playout was stopped or player is ready after setup and tries to play.
onStartBuffering function <optional>

Fires if playout is started but no media is available.
onStopBuffering function <optional>

Fires if playout resumes after buffering.
onError function <optional>

Fires if any kind of error occures.
onStats function <optional>

Fires if the player has measured statistics.
onMetaData function <optional>

Fires if the player has received metadata.
onMute function <optional>

Fires if the player is muted.
onUnmute function <optional>

Fires if the player is unmuted.
onVolumeChange function <optional>

Fires if the player's volume has changed.
onStreamInfo function <optional>

Fires if stream info is available.
onStreamInfoUpdate function <optional>

Fires if stream info of a stream is updated during playback.
onWarning function <optional>

Fires if something is not as expected, but functionality works.
onDestroy function <optional>

Fires if the player is destroyed.
onUpdateSourceInit function <optional>

Fires if the player has received an update source request.
onUpdateSourceSuccess function <optional>

Fires if the player has successfully updated the source.
onUpdateSourceFail function <optional>

Fires if the player has failed to update the source.
onUpdateSourceAbort function <optional>

Fires if the player aborted the update source request.
onServerInfo function <optional>

Fires if h5live server info is available.
onFullscreenChange function <optional>

Fires if the fullscreen mode of the player has changed.
tweaks object <optional>

The object to tweak the player (only h5live).

Properties
Name Type Argument Description
buffer object <optional>

The bufffer object.

Properties
Name Type Description
min number

The minimum time to buffer.
start number

The buffer time when the playout starts.
target number

The target buffer time.
limit number

The buffer time limit before increase play speed.
max number

The maximum time to buffer.
bufferDynamic object <optional>

The bufffer dynamic object.

Properties
Name Type Description
offsetThreshold number

The threshold time between two bufferings in seconds. If the measured value is lower, the buffer will be increased by offsetStep.
offsetStep number

The step to increase in seconds. Also the step to decrease in cooldown.
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 <optional>

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.

Properties
Name Type Argument Default Description
accountId string

The account id provided by nanocosmos to use with the metrics.
accountKey string

The account key provided by nanocosmos to use with the metrics.
serverDomain string <optional>

The server domain to use with the metrics. e.g. "metrics.stream360.io".
userId string <optional>

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.
eventId string <optional>

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.
statsInterval number <optional>
 10

The interval how often the stats should be collected in seconds. The minimum is 5 seconds..
customField* string <optional>

Custom field. * can be replaced with 1 - 10 e.g. 'customField3'. Possible from 'customField1' to 'customField10'.
See:
Examples
// 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 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'
    }
};
// 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
    }
};
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'
    }
};

entry

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

Type:
  • object
Properties:
Name Type Argument 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 <optional>

A custom label for the stream e.g. 'high'.
tag string <optional>

Custom informations about the stream entry.
info object <optional>

The info object to set stream meta data.

Properties
Name Type Default Description
bitrate number 0

The stream bitrate.
width number 0

The stream width.
height number 0

The stream height.
framerate number 0

The stream framerate.
hls string <optional>

An hls playout url as string.
h5live object <optional>

The h5live object to configure the h5live connection.

Properties
Name Type Argument Description
server object

The h5live server object.

Properties
Name Type Argument Description
websocket string

The h5live websocket url.
progressive string <optional>

The h5live progressive download url.
hls string

The h5live hls url. Have to be set for playback on iOS 10 or higher. iOS 9 or lower is not supported.
token string <optional>

The h5live server token.
rtmp object

The rtmp playout object for h5live playback.

Properties
Name Type Description
url string

The rtmp playout url. Have to include the domain, port and application e.g. 'rtmp://example.com:80/live'.
streamname string

The rtmp streamname.
security object <optional>

The h5live security object for h5live playback.

Properties
Name Type Description
token string

The security service token.
expires string

The time the token expires (system time).
options string

The security options.
tag string

The custom tag to decrypt the token.
params object <optional>

The params object to pass custom query parameters over the h5live server connection. Parameters can be passed as key/value pairs.
bintu object <optional>

An bintu object to get sources.

Properties
Name Type Argument Default Description
streamid string

The bintu stream id.
apiurl string <optional>
 https://bintu.nanocosmos.de

The bintu api url.
See:
Examples
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,
            'fastStart': false,
            'timeout': 20
        }
    },
    "startIndex": 2 // lowest
};
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'
                }
            }
        }
    ]
};

errorcode

The possible error codes in a onError event.

Type:
  • number
Properties:
Name Type Description
1000-1999 PlayerError
Properties
Name Type Description
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
Properties
Name Type Description
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
Properties
Name Type Description
3001

A fetching process of the media aborted by user.
3002

An error occurred when downloading media.
3003

An error occurred when decoding media.
3004

The received audio/video is not supported.
3005

An error occurred while hls playback when decoding video.
3100

The media source extension changed the state to 'ended'. NOT AVAILABLE FOR HLS PLAYBACK.
3101

An error occurred while buffering on hls playback.
3102

Buffer range is higher than allowed on hls playback.
3200

An unspecific media error occurred.
4000-4999 NetworkError
Properties
Name Type Description
4000-4099 General
Properties
Name Type Description
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
Properties
Name Type Description
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
Properties
Name Type Description
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
Properties
Name Type Description
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
Properties
Name Type Description
5000-5099 General
Properties
Name Type Description
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
Properties
Name Type Description
5101

Could not find bintu stream. The stream is not live.
5102

No bintu stream id passed.
5103

Bintu service rejected.
5200-5299 Metrics
Properties
Name Type Description
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.
See:

pausereason

The possible pause reason in a onPause event.

Type:
  • string
Properties:
Name Type 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.
See:

state

The state of the player.

Type:
  • number
Properties:
Name Type 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
See:

Events

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).

Type: object
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.

Properties
Name Type Description
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.
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.
See:
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);
});

onDestroy

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

Type: object
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 NanoPlayer~state

The player state.
See:
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);
});

onError

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

Type: object
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.

Properties
Name Type Argument Description
code NanoPlayer~errorcode

The error code.
message string

The error cause as human readable string.
playback object <optional>

The optional data playback object (since 4.28.0). Includes current playback stats. Only available if error is a startup error.

Properties
Name Type Description
bufferDelayCurrent number

Buffer delay in ms experienced at the time of the error. Always available.
bitrateCurrent number

The bitrate in Bit/s of playback at the time the error occurred. Always available.
framerateCurrent number

Playback framerate per second at the time of the error. Always available.
state object <optional>

The optional data state object (since 4.28.0). Includes all timestamps of the startup phase that have been reached before the error occurred. Only available if error is a startup error.

Properties
Name Type Argument Description
connected number <optional>

Timestamp in ms indicating when the connection was established (relative to load start). Optional.
firstFragmentReceived number <optional>

Time in ms at which the first fragment of media data was received (relative to load start). Optional.
firstFrameRendered number <optional>

Time in ms when the first frame was rendered (relative to load start). Optional.
playable number <optional>

Timestamp in ms indicating when playback was ready to begin (relative to load start). Optional.
playing number <optional>

Timestamp in ms indicating when playback actually started (relative to load start). Optional.
error number

Timestamp in ms marking when the error occurred (relative to load start). Always available.
state NanoPlayer~state

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

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.

Type: object
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.

Properties
Name Type Description
entered boolean

Indicates if the player has entered fullscreen mode.
state NanoPlayer~state

The player state.
See:
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);
});

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.

Type: object
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.

Properties
Name Type Description
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 NanoPlayer~state

The player state.
See:
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);
});

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.

Type: object
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.

Properties
Name Type Description
handlerName string

The name of the metadata handler.
message *

The metadata message.
streamTime number

The timestamp of the metadata in relation to currentTime.
See:
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.

Type: object
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.

Properties
Name Type Description
volume number

The current volume in a range from 0.0 to 1.0.
See:
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);
});

onPause

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

Type: object
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.

Properties
Name Type Description
reason NanoPlayer~pausereason

The reason of pausing.
state NanoPlayer~state

The player state.
See:
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);
});

onPlay

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

Type: object
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.

Properties
Name Type Description
stats object

The startup stats object.

Properties
Name Type Description
connecting number

The time when 'player.play()' is just called in ms (always zero).
connected number

The time when the connection is established in ms (relative to 'connecting').
firstFragmentReceived number

The time when the first fragment is received in ms (relative to 'connecting').
firstFrameRendered number

The time when the first frame is rendered in ms (relative to 'connecting').
playable number

The time when the buffer has enough data to start in ms (relative to 'connecting').
playing number

The time when the playback is started in ms (relative to 'connecting'). It's the total startup time.
state NanoPlayer~state

The player state.
See:
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);
});

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.

Type: object
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.

Properties
Name Type Description
config config

The config object.
state NanoPlayer~state

The player state.
See:
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);
});

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.

Type: object
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.

Properties
Name Type Description
serverInfo object

The server info object.

Properties
Name Type Description
applicationServerName string

The application name of the h5live server.
applicationServerVersion object

The application version of the h5live server.
hostname string

The hostname of the h5live server.
See:
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);
});

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.

Type: object
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 NanoPlayer~state

The player state.
See:
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);
});

onStats

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

Type: object
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.

Properties
Name Type Description
stats object

The stats object.

Properties
Name Type Description
currentTime number

The current time of the video.
playout object

The playout object.

Properties
Name Type Description
start number

The start play time of the video.
end number

The end play time of the video.
buffer object

The buffer object.

Properties
Name Type Description
start number

The start buffer time of the video.
end number

The end buffer time of the video.
delay object

The delay buffer object.

Properties
Name Type Description
current number

The current delay time.
avg number

The average delay time over the last second.
min number

The minimum delay time over the last second.
max number

The maximum delay time over the last second.
bitrate object

The bitrate object.

Properties
Name Type Description
current number

The current bitrate in Bit/s. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
avg number

The average bitrate in Bit/s over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
min number

The minimum bitrate in Bit/s over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
max number

The maximum bitrate in Bit/s over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
framerate object

The framerate object.

Properties
Name Type Description
current number

The current network framerate. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
avg number

The average network framerate over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
min number

The minimum network framerate over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
max number

The maximum network framerate over the last 10 seconds. Is '0' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
playbackrate object

The playbackrate object. (since 4.14.1)

Properties
Name Type Description
current number

The current video playbackrate. (since 4.14.1)
avg number

The average video playbackrate over the last 10 seconds. (since 4.14.1)
min number

The minimum video playbackrate over the last 10 seconds. (since 4.14.1)
max number

The maximum video playbackrate over the last 10 seconds. (since 4.14.1)
buffergoal object

The buffergoal object. Values used by the latency control (since 4.14.1)

Properties
Name Type Description
base number

The suggested calculated buffergoal value depending on the latency control mode and playback conditions (since 4.14.1)
real number

The final calculated buffergoal value including offsets (since 4.14.1)
min number

The minimum possible buffergoal value. (since 4.14.1)
max number

The maximum possible buffergoal value. (since 4.14.1)
quality object

The video playback quality object.

Properties
Name Type Description
corruptedVideoFrames number

The total number of corrupted video frames.
corruptedVideoFramesCurrent number

The number of corrupted video frames within the last second.
creationTime number

The time in miliseconds since the start of the navigation and the creation of the video element.
droppedVideoFrames number

The total number of dropped video frames.
droppedVideoFramesCurrent number

The number of dropped video frames within the last second.
totalVideoFrames number

The total number of created and dropped video frames since creation of the video element.
See:
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);
});

onStopBuffering

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

Type: object
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 NanoPlayer~state

The player state.
See:
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);
});

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.

Type: object
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.

Properties
Name Type Description
streamInfo object

The stream info object.

Properties
Name Type Description
url string

The complete stream url with parameters.
rtmp object

The rtmp stream object.
rtmo.url string

The rtmp stream url.
rtmp.streamname string

The rtmp streamname.
haveAudio boolean

Indicates if the stream contains audio.
haveVideo boolean

Indicates if the stream contains video.
audioInfo object | null

The audio info object. Is 'null' if the stream contains no audio.

Properties
Name Type Description
bitsPerSample number | null

The bits per sample. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
sampleRate number | null

The audio sample rate. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
channels number | null

The number of audio channels. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
videoInfo object | null

The stream info object. Is 'null' if the stream contains no video.

Properties
Name Type Description
width number | null

The width of the video. Is 'null' if not available.
height number | null

The height of the video. Is 'null' if not available.
frameRate number | null

The video frame rate. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
See:
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.

Type: object
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.

Properties
Name Type Description
streamInfo object

The stream info object.

Properties
Name Type Description
url string

The complete stream url with parameters.
haveAudio boolean

Indicates if the stream contains audio.
haveVideo boolean

Indicates if the stream contains video.
audioInfo object | null

The audio info object. Is 'null' if the stream contains no audio.

Properties
Name Type Description
bitsPerSample number | null

The bits per sample. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
sampleRate number | null

The audio sample rate. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
channels number | null

The number of audio channels. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
videoInfo object | null

The stream info object. Is 'null' if the stream contains no video.

Properties
Name Type Description
width number | null

The width of the video. Is 'null' if not available.
height number | null

The height of the video. Is 'null' if not available.
frameRate number | null

The video frame rate. Is 'null' if not available. NOT AVAILABLE FOR HLS PLAYBACK.
See:
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);
});

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.

Type: object
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.

Properties
Name Type Description
source object

The current source object.
entry object

The current source entry.
rule string

The adaption switch rule.
reason string

The abort reason. Possible values are 'equalsource', 'superseded' and 'frequency'.
tag string

A static string in format: {data.entry.h5live.rtmp.streamname} + ' streamSwitch ' + {data.id}.
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'
type string

The switch type. Possible values are 'up', 'down' (in case of adaptive stream switch) and 'direct' (switch via 'switchStream').
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 NanoPlayer~state

The player state.
See:
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);
});

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.

Type: object
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 NanoPlayer~state

The player state.
See:
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);
});

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.

Type: object
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.

Properties
Name Type Description
source object

The current source object.
entry object

The current source entry.
rule string

The adaption switch rule.
options object

The switch options object.
tag string

A static string in format: {data.entry.h5live.rtmp.streamname} + ' streamSwitch ' + {data.id}.
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'
type string

The switch type. Possible values are 'up', 'down' (in case of adaptive stream switch) and 'direct' (switch via 'switchStream').
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 NanoPlayer~state

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

Type: object
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.

Properties
Name Type Description
source object

The current source object.
entry object

The current source entry.
rule string

The adaption switch rule.
tag string

A static string in format: {data.entry.h5live.rtmp.streamname} + ' streamSwitch ' + {data.id}.
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'
type string

The switch type. Possible values are 'up', 'down' (in case of adaptive stream switch) and 'direct' (switch via 'switchStream').
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 NanoPlayer~state

The player state.
See:
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);
});

onUnmute

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

Type: object
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.

Properties
Name Type Description
volume number

The current volume in a range from 0.0 to 1.0.
See:
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);
});

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.

Type: object
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.

Properties
Name Type Description
source object

The current source object.
entry object

The current source entry.
rule string

The adaption switch rule.
reason string

The abort reason. Possible values are 'equalsource', 'superseded' and 'frequency'.
tag string

The custom tag string given in the options object of the 'updateSource' call. Is an empty string if not set.
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'
type string

The switch type. Here always 'update'.
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 NanoPlayer~state

The player state.
See:
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);
});

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.

Type: object
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 NanoPlayer~state

The player state.
See:
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);
});

onUpdateSourceInit

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

Type: object
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.

Properties
Name Type Description
source object

The current source object.
entry object

The current source entry.
rule string

The adaption switch rule.
options object

The switch options object.
tag string

The custom tag string given in the options object of the 'updateSource' call. Is an empty string if not set.
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'
type string

The switch type. Here always 'update'.
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 NanoPlayer~state

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

Type: object
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.

Properties
Name Type Description
source object

The current source object.
entry object

The current source entry.
rule string

The adaption switch rule.
tag string

The custom tag string given in the options object of the 'updateSource' call. Is an empty string if not set.
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'
type string

The switch type. Here always 'update'.
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 NanoPlayer~state

The player state.
See:
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);
});

onVolumeChange

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

Type: object
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.

Properties
Name Type Description
volume number

The current volume in a range from 0.0 to 1.0.
See:
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);
});

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.

Type: object
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.

Properties
Name Type Description
message string

The warning as human readable string.
state NanoPlayer~state

The player state.
See:
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);
});