NanoPlayer
NanoPlayer
NanoPlayer (H5Live) Public API Class 4.30.1
Kind: global class Version: 4.30.1
new NanoPlayer(playerDivId)
The constructor. The source can be loaded via script tag, AMD (requirejs) or CommonJS
Param | Type | Description |
---|---|---|
playerDivId | string | The div element the player will be embedded into. |
Example
<!-- Example: load player with new video element into playerDiv -->
<div id="playerDiv"></div>
<script type="text/javascript" src="nanoplayer.4.min.js"></script>
<script type="text/javascript">
var player;
var config = {
"source": {
"entries": [
{
"h5live": {
// your rtmp stream
"rtmp": {
"url": "rtmp://bintu-play.nanocosmos.de/play",
"streamname": "XXXXX-YYYYY"
},
"server": {
"websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
"hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
"progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
}
}
}
]
}
};
function initPlayer() {
player = new NanoPlayer('playerDiv');
player.setup(config).then(function (config) {
console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
console.log(error);
});
}
// load player from playerDiv
document.addEventListener('DOMContentLoaded', function () {
initPlayer();
});
</script>
Example
<!-- Example: load player with existing html video element -->
<div id="playerDiv">
<video id="myPlayer"></video>
<!-- HLS PLAYBACK ONLY uses 2 video elements for playback if more than one stream is configured, required for seamless stream switching -->
<video id="myPlayer2"></video>
</div>
<script>
var player;
var config = {
"source": {
"entries": [
{
"h5live": {
// your rtmp stream
"rtmp": {
"url": "rtmp://bintu-play.nanocosmos.de/play",
"streamname": "XXXXX-YYYYY"
},
"server": {
"websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
"hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
"progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
}
}
}
]
},
"playback": {
"videoId": ["myPlayer", "myPlayer2"]
}
};
function initPlayer() {
player = new NanoPlayer('playerDiv');
player.setup(config).then(function (config) {
console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
console.log(error);
});
}
document.addEventListener('DOMContentLoaded', function () {
initPlayer();
});
</script>
Example
<!-- Example: load player with require.js -->
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">
var player;
requirejs.config({
paths: {
// loads the player ...
// for a local copy of the minified player use a relative path e.g. 'js/nanoplayer.4.min'
// if 'baseUrl' is defined a local path have to be relative to the base path
nanoplayer: '//demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js'
},
waitSeconds: 20, // timeout for loading modules
});
require('nanoplayer', function() {
initPlayer();
});
</script>
nanoPlayer.version : string
The version of the player.
Kind: instance property of NanoPlayer
nanoPlayer.coreversion : string
The version of the core.
Kind: instance property of NanoPlayer
nanoPlayer.viewversion : string
The version of the view.
Kind: instance property of NanoPlayer
nanoPlayer.type : string
The type of the player.
Kind: instance property of NanoPlayer
nanoPlayer.id : string
The unique id of the player.
Kind: instance property of NanoPlayer
nanoPlayer.capabilities : Array.<string>
The supported tech names of the player.
Kind: instance constant of NanoPlayer
nanoPlayer.setup(config) ⇒ Promise.<(config|error)>
Initializes the player with a given config object.
Kind: instance method of NanoPlayer
See: config
Param | Type | Description |
---|---|---|
config | config | The config object for the player including sources, events, styles. |
Example
// player instance of NanoPlayer
player.setup(config).then(function (config) {
console.log('setup ok with config: ' + JSON.stringify(config));
}, function (error) {
console.log(error);
});
nanoPlayer.destroy()
Cleans up the player and removes all nested elements from the container div.
Kind: instance method of NanoPlayer
Example
// player instance of NanoPlayer
player.destroy();
player.setup(config);
nanoPlayer.play()
Plays the player.
Kind: instance method of NanoPlayer
Example
// player instance of NanoPlayer
player.play();
nanoPlayer.pause()
Pauses the player.
Kind: instance method of NanoPlayer
Example
// player instance of NanoPlayer
player.pause();
nanoPlayer.mute()
Mutes the player.
Kind: instance method of NanoPlayer
Example
// player instance of NanoPlayer
player.mute();
nanoPlayer.unmute()
Unmutes the player.
Kind: instance method of NanoPlayer
Example
// player instance of NanoPlayer
player.unmute();
nanoPlayer.setVolume(volume)
Sets the volume of the player.
See here for more informations.
Kind: instance method of NanoPlayer
Param | Type | Description |
---|---|---|
volume | number | The volume to set in a range from 0.0 to 1.0. |
Example
// player instance of NanoPlayer
player.setVolume(0.3);
nanoPlayer.updateSource(source) ⇒ Promise.<(config|error)>
Updates the source of the player.
Kind: instance method of NanoPlayer
See: config
Param | Type | Default | Description |
---|---|---|---|
source | object | The object to configure the source to play, one of the following properties have to be set. | |
[source.entries] | Array.<entry> | The source entries array for a set of streams. USE INSTEAD OF SOURCE.H5LIVE. Used to configure stream entries. Can have one to many 'entry' objects. Only one existing entry is similar than a single source. In this case no entries options are needed. | |
[source.startIndex] | number | 0 | The index of the entry to start playback with. Can be in the range from 0 to 'entries.length-1'. |
[source.options] | object | The object to configure the source entries options. | |
[source.options.switch] | object | The object to configure the stream switch options like method etc. | |
[source.options.switch.method] | string | "server" | The update method. Possible values are 'server' (default) and 'client'. |
[source.options.switch.pauseOnError] | boolean | false | If set the player stops if an error occure during the stream switch. Default is false. |
[source.options.switch.forcePlay] | boolean | true | If set the player starts playback in case the player is paused. Default is true. |
[source.options.switch.fastStart] | boolean | false | DEPRECATED. Only if method is 'server'. Tries to accelerate the startup time of the new source. Default is false. |
[source.options.switch.timeout] | number | 20 | The timeout for the update source request in seconds. If reached the error 4006 will thrown in the 'onUpdateSourceFail' event. Default is 10 seconds, valid range is between 5 and 30. |
[source.options.switch.tag] | string | A custom field that can be any string like 'stream-800k' or '720p'. This tag will be returned in any completion event of the 'updateSource' request like 'onUpdateSourceSuccess', 'onUpdateSourceFail' and 'onUpdateSourceAbort'. | |
[source.options.adaption] | object | The object to set an adaption for switching. | |
[source.options.adaption.rule] | string | "none" | The switch rule if multiple entries are defined. Possible values are 'deviationOfMean' (ABR automatic), 'deviationOfMean2' (ABR automatic) and 'none' (default, means only manual stream switch via 'switchStream' possible). |
[source.options.adaption.downStep] | number | 1 | The minimum number of steps during a ABR down switch ('deviationOfMean' and 'deviationOfMean2' only). |
[source.h5live] | object | DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. The h5live object to configure the h5live connection. | |
source.h5live.server | object | The h5live server object. | |
[source.h5live.server.websocket] | string | The h5live websocket url. | |
[source.h5live.server.progressive] | string | The h5live progressive download url. | |
[source.h5live.server.hls] | string | The h5live hls url. Have to be set for playback on iOS 10 or higher. iOS 9 or lower is not supported. | |
[source.h5live.token] | string | The h5live server token. | |
[source.h5live.rtmp] | object | The rtmp playout object for h5live playback. | |
source.h5live.rtmp.url | string | The rtmp playout url. Have to include the domain, port and application e.g. 'rtmp://example.com:80/live'. | |
source.h5live.rtmp.streamname | string | The rtmp streamname. | |
[source.h5live.security] | object | The h5live security object for h5live playback. | |
source.h5live.security.token | string | The security service token. | |
source.h5live.security.expires | string | The time the token expires (system time). | |
source.h5live.security.options | string | The security options. | |
source.h5live.security.tag | string | The custom tag to decrypt the token. | |
[source.h5live.params] | object | The params object to pass custom query parameters over the h5live server connection. Parameters can be passed as key/value pairs. | |
[source.bintu] | object | DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. An bintu object to get sources. | |
source.bintu.streamid | string | The bintu stream id. | |
[source.bintu.apiurl] | string | "https://bintu.nanocosmos.de" | The bintu api url. |
[source.hls] | string | DEPRECATED. PLEASE USE ENTRIES!!! WILL BE OVERWRITTEN IN CASE AT LEAST ONE 'ENTRY' IS DEFINED IN 'ENTRIES' ARRAY. An hls playout url as string. |
Example
var source = {
"entries": [
{
"index": 0,
"label": "high",
"tag": "this is a high quality stream",
"info": {
"bitrate": 1200,
"width": 1280,
"height": 720,
"framerate": 30
},
"hls": "",
"h5live": {
"rtmp": {
"url": "rtmp://bintu-play.nanocosmos.de/play",
"streamname": "XXXXX-YYYY1"
},
"server": {
"websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
"hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
"progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
},
"token": "",
"security": {}
},
"bintu": {}
},
{
"index": 1,
"label": "medium",
"tag": "this is a medium quality stream",
"info": {
"bitrate": 800,
"width": 864,
"height": 480,
"framerate": 30
},
"hls": "",
"h5live": {
"rtmp": {
"url": "rtmp://bintu-play.nanocosmos.de/play",
"streamname": "XXXXX-YYYY2"
},
"server": {
"websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
"hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
"progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
},
"token": "",
"security": {}
},
"bintu": {}
},
{
"index": 2,
"label": "low",
"tag": "this is a low quality stream",
"info": {
"bitrate": 400,
"width": 426,
"height": 240,
"framerate": 15
},
"hls": "",
"h5live": {
"rtmp": {
"url": "rtmp://bintu-play.nanocosmos.de/play",
"streamname": "XXXXX-YYYY3"
},
"server": {
"websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
"hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
"progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
},
"token": "",
"security": {}
},
"bintu": {}
}
],
"options": {
"adaption": {
"rule": "deviationOfMean2",
"downStep": 1
},
"switch": {
'method': 'server',
'pauseOnError': false,
'forcePlay': true,
'timeout': 20
}
},
"startIndex": 2 // lowest
};
// player instance of NanoPlayer
player.updateSource(source).then(function (config) {
console.log('update source ok with config: ' + JSON.stringify(config));
}, function (error) {
console.log(error);
});
Example
var source = {
"entries": [
{
"index": 0,
"label": "high", // optional
"tag": "this is a high quality stream", // optional
"info": { // optional
"bitrate": 1200,
"width": 1280,
"height": 720,
"framerate": 30
},
"h5live": {
// your rtmp stream
"rtmp": {
"url": "rtmp://bintu-play.nanocosmos.de/play",
"streamname": "XXXXX-YYYYY"
},
"server": {
"websocket": "wss://bintu-h5live.nanocosmos.de:443/h5live/stream.mp4",
"hls": "https://bintu-h5live.nanocosmos.de:443/h5live/http/playlist.m3u8",
"progressive": "https://bintu-h5live.nanocosmos.de:443/h5live/http/stream.mp4"
},
// optional (secure token)
"security": {
"token": 'awe456b367g4e6rm8f56hbe6gd8f5m8df6n8idf6tf8mfd68ndi',
"expires": '1519819200',
"options": '15',
"tag": 'anyTag'
}
}
}
]
};
// player instance of NanoPlayer
player.updateSource(source).then(function (config) {
console.log('update source initialized with config: ' + JSON.stringify(config));
}, function (error) {
console.log(error);
});
nanoPlayer.switchStream(index) ⇒ Promise.<(config|error)>
Switch to a stream given over source entries.
Kind: instance method of NanoPlayer
See: entry
Param | Type | Description |
---|---|---|
index | number | The index of the stream in the given stream set to switch to. |