NanoPlayer

Class: NanoPlayer

NanoPlayer

NanoPlayer (H5Live) Public API Class 3.18.7

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:
  • 3.18.7
Examples
<!-- Example: load player with new video element into playerDiv -->
<div id="playerDiv"></div>
<script type="text/javascript" src="nanoplayer.4.min.js"></script>
<script type="text/javascript">
    var player;
    var config = {
        source: {
            h5live: {
                // h5live server endpoint (not required to change)
                server: {
                    websocket: 'wss://bintu-h5live.nanocosmos.de/h5live/stream',
                    hls: 'https://bintu-h5live.nanocosmos.de/h5live/http/playlist.m3u8'
                },
                // rtmp stream source (your live stream)
                rtmp: {
                    url: 'rtmp://bintu-play.nanocosmos.de:80/live',
                    streamname: 'XXXXX-YYYYY'
                }
            }
        }
    };
    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>
</div>
<script>
    var player;
    var config = {
        source: {
            h5live: {
                // h5live server endpoint (not required to change)
                server: {
                    websocket: 'wss://bintu-h5live.nanocosmos.de/h5live/stream',
                    hls: 'https://bintu-h5live.nanocosmos.de/h5live/http/playlist.m3u8'
                },
                // rtmp stream source (your live stream)
                rtmp: {
                    url: 'rtmp://bintu-play.nanocosmos.de:80/live',
                    streamname: 'XXXXX-YYYYY'
                }
            }
        },
        playback: {
            videoId: 'myPlayer'
        }
    };
    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.3.min'
            // if 'baseUrl' is defined a local path have to be relative to the base path
            nanoplayer: '//demo.nanocosmos.de/nanoplayer/api/nanoplayer.4.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

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

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();

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

Initializes the player with a given config object.

Parameters:
Name Type Description
config 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.

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

unmute()

Unmutes the player.

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

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

Updates the source of the player.

Parameters:
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 Description
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 <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>

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>

An hls playout url as string.
options 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

Only if method is 'server'. Tries to accelerate the startup time of the new source. Default is false.
timeout number <optional>
 10

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'.
Returns:
Type
Promise.<(config|error)>
Example
var source = {
    h5live: {
        // h5live server endpoint (not required to change)
        server: {
            websocket: 'wss://bintu-h5live.nanocosmos.de/h5live/stream',
            hls: 'https://bintu-h5live.nanocosmos.de/h5live/http/playlist.m3u8'
        },
        // rtmp stream source (your live stream)
        rtmp: {
            url: 'rtmp://bintu-play.nanocosmos.de:80/live',
            streamname: 'XXXXX-YYYYY'
        },
        security: {
            token: 'awe456b367g4e6rm8f56hbe6gd8f5m8df6n8idf6tf8mfd68ndi',
            expires: '1519819200',
            options: '15',
            tag: 'anyTag'
        }
    }
}
var options = {
    method: 'server',
    pauseOnError: false,
    forcePlay: true,
    fastStart: false,
    timeout: 10,
    tag: 'XXXXX-YYYYY'
}
// player instance of NanoPlayer
player.updateSource(source, options).then(function (config) {
    console.log('update source ok 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 Description
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 <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>

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>

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

Enable/disable automute (default: false).
IMPORTANT: Browsers (mostly mobile) with stricter autoplay policy only allow autoplay with muted audio or within a user interaction (tap, click etc.). With 'autoplay = true' and this option enabled the player will be muted to allow autoplay in case the browsers policy restricted autoplay.
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.
metadata boolean <optional>
 false

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

Force the player to use this tech - possible values: "h5live", "flash", "hls.native"
flashplayer string <optional>

A absolute or relative path to the "nano.player.swf". If not set the player will be required from the base path.
videoId string <optional>

An element id of a existing video tag that should be used for playback. No new element will be created and after destroy it will be kept.
keepConnection boolean <optional>
 false

If enabled the player will have always a connection to the h5live server.
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.
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 IOS 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>
 false

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)", ...).
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.
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.
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.
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 1 second.
customField* string <optional>

Custom field. * can be replaced with 1 - 10 e.g. 'customField3'. Possible from 'customField1' to 'customField10'.
See:
Examples
var config = {
    source: {
        bintu: {
            streamid: 'q23rf2tzw3h6754iretmft7irt'
        }
    }
};
// Complete config example
var config = {
    source: {
        h5live: {
            // h5live server endpoint (not required to change)
            server: {
                websocket: 'wss://bintu-h5live.nanocosmos.de/h5live/stream',
                hls: 'https://bintu-h5live.nanocosmos.de/h5live/http/playlist.m3u8'
            },
            // rtmp stream source (your live stream)
            rtmp: {
                url: 'rtmp://bintu-play.nanocosmos.de:80/live',
                streamname: 'XXXXX-YYYYY'
            },
            // (optional) secure token
            security: {
                token: 'awe456b367g4e6rm8f56hbe6gd8f5m8df6n8idf6tf8mfd68ndi',
                expires: '1519819200',
                options: '15',
                tag: 'anyTag'
            }
        }
    },
    // playback is completely optional
    playback: {
        autoplay: false,
        metadata: true,
        keepConnection: true,
        reconnect: {
            minDelay: 2.5,
            maxDelay: 12.5,
            delaySteps: 6,
            maxRetries: 20
        }
    },
    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
        },
        bufferDynamic: {
            offsetThreshold: 2,
            offsetStep: 0.5,
            cooldownTime: 10
        }
    },
    // metrics/analytics (requires account)
    metrics: {
        accountId: 'myId',
        accountKey: 'sdfhe457zsjhnrtzd8',
        userId: 'myUserId',
        eventId: 'myEventId',
        statsInterval: 10,
        customField1: 'custom',
        customField2: 42,
        customField3: true
    }
};
// example with source url params and events
var config = {
    source: {
        h5live: {
            server: {
                websocket: 'wss://bintu-h5live.nanocosmos.de/h5live/stream',
                hls: 'https://bintu-h5live.nanocosmos.de/h5live/http/playlist.m3u8'
            },
            // rtmp stream source (your live stream)
            params: {
                url: 'rtmp://bintu-play.nanocosmos.de:80/live',
                streamname: 'XXXXX-YYYYY'
                custom_key: 'custom_value'
            }
        }
    },
    playback: {
        autoplay: false,
        videoId: 'myVideoTagId'
    },
    events: {
        onStats: function (e) {
            console.log(e);
        }
    },
    style: {
       view: false
    },
    metrics: {
        accountId: 'myId',
        accountKey: 'sdfhe457zsjhnrtzd8'
    }
};
var config = {
    source: {
        h5live: {
            // h5live server endpoint (not required to change)
            server: {
                websocket: 'wss://bintu-h5live.nanocosmos.de/h5live/stream',
                hls: 'https://bintu-h5live.nanocosmos.de/h5live/http/playlist.m3u8'
            },
            // rtmp stream source (your live stream)
            rtmp: {
                url: 'rtmp://bintu-play.nanocosmos.de:80/live',
                streamname: 'XXXXX-YYYYY'
            }
        },
        token: "{\"type\":\"token1\",\"key\":\"exampleToken\"}"
    },
    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'
    }
};

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

The media source extension changed the state to 'ended'. NOT AVAILABLE FOR IOS.
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 in the 'updateSource' call has been stopped.
4006

The update 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

A forced tech is not supported by your browser.
5003

The players source configuration is malformed or missing.
5004

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

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 Description
code NanoPlayer~errorcode

The error code.
message string

The error cause as human readable string.
state NanoPlayer~state

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

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);
});

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 IOS.
avg number

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

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

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

The framerate object.

Properties
Name Type Description
current number

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

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

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

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

The video playback quality object.

Properties
Name Type Description
corruptedVideoFrames number

The total number of corrupted video frames. ONLY AVAILABLE FOR FIREFOX.
corruptedVideoFramesCurrent number

The number of corrupted video frames within the last second. ONLY AVAILABLE FOR FIREFOX.
creationTime number

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

The total number of dropped video frames. ONLY AVAILABLE FOR FIREFOX.
droppedVideoFramesCurrent number

The number of dropped video frames within the last second. ONLY AVAILABLE FOR FIREFOX.
totalVideoFrames number

The total number of created and dropped video frames since creation of the video element. ONLY AVAILABLE FOR FIREFOX.
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.
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 IOS.
sampleRate number | null

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

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

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

The number of audio channels. Is 'null' if not available. NOT AVAILABLE FOR IOS.
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 IOS.
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);
});

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 ('updatefrequency'). 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
reason string

The options object used for the 'updateSource' call. Possible values are 'equalsource', 'superseded' and 'updatefrequency'.
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'
state NanoPlayer~state

The player state.
See:
Example
// player instance of NanoPlayer
var onUpdateSourceAbort = function (event) {
    console.log('Update Source Abort with source: ' + JSON.stringify(event.data.source) + ' and options: ' + JSON.stringify(event.data.options));
    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 object

The data object.

Properties
Name Type Description
code object

The error code. Similar to the errorcodes.
message object

The error message.
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'
state NanoPlayer~state

The player state.
See:
Example
// player instance of NanoPlayer
var onUpdateSourceFail = function (event) {
    console.log('Update Source Fail 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 source object given in the 'updateSource' call.
options object

The options object used for the 'updateSource' call.
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'
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
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'
state NanoPlayer~state

The player state.
See:
Example
// player instance of NanoPlayer
var onUpdateSourceSuccess = function (event) {
    console.log('Update Source Success 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);
});