Getting started

Embedding H5Live player on your own web page

There are a few options when it comes to implementing H5Live player on your web page depending on your needs, we will walk you through each of them.

Basically, there are 4 options for configuration:

Configuration with bintu stream group (since v4.18.0)
Simple configuration with RTMP streamname (since v4.13.0)
Custom configuration with RTMP streamname
Configuration with bintu stream id

Option 1: Configuration with bintu stream group

Bintu stream group configuration was introduced in nanoStream H5Live Player Version 4.18.0 and is available a single and multiple streams. It is the easiest player configuration available especially for ABR setup. For more than one stream it is necessary to add a 'startIndex' or 'group.startQuality'.

info

More information about stream group configuration, can be found in the feature description: Stream group configuration

nanoplayer.html
<div id='playerDiv'></div>
<script src='https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js'></script>
<script>
var player;
var config = {
   'source': {
        'group': {
            'id': 'xxxxxxxx-zzzz-yyy-aaaa-aaabbbcccddd', // your streamgroup id
            'security': {
                'jwtoken': 'xxx' // your security token if applicable
            },
            'apiurl': 'https://bintu.nanocosmos.de', // optional
            'startQuality': 'medium' // optional
        },
         "options": {
            "adaption": {
                "rule": "deviationOfMean2" // enable ABR
            },
            "switch": {
                'method': 'server',
                'pauseOnError': false,
                'forcePlay': true
                'timeout': 10,
            }
        },
    },
    'playback': {
        'autoplay': true,
        'automute': true,
        'muted': false,
        'faststart': true,
        'latencyControlMode': 'balancedadaptive'
    }
};
document.addEventListener('DOMContentLoaded', function () {
    player = new NanoPlayer('playerDiv');
    player.setup(config).then(function (config) {
        console.log('setup success');
        console.log('config: ' + JSON.stringify(config, undefined, 4));
    }, function (error) {
        alert(error.message);
    });
});
</script>

Option 2: Simple configuration with RTMP streamname

Using source defaults with standard nanoStream Cloud was introduced in nanoStream H5Live Player Version 4.13.0. By passing defaults.service with the value 'bintu', the bintu defaults values for h5live.server and h5live.rtmp.url will be applied which means that adding it on your side is not needed.

nanoplayer.html
<div id='playerDiv'></div>
<script src='https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js'></script>
<script>
var player;
var config = {
   'source': {
            'defaults': {
                'service': 'bintu'
            },
            'entries': [
                    {
                        'h5live': {
                            'rtmp': {
                                'streamname': 'XXXXX-YYYYY' // your rtmp streamname
                            }
                        }
                    }
            ]
        },
    'playback': {
        'autoplay': true,
        'automute': true,
        'muted': false,
        'faststart': true,
        'latencyControlMode': 'balancedadaptive'
    },
};
document.addEventListener('DOMContentLoaded', function () {
    player = new NanoPlayer('playerDiv');
    player.setup(config).then(function (config) {
        console.log('setup success');
        console.log('config: ' + JSON.stringify(config, undefined, 4));
    }, function (error) {
        alert(error.message);
    });
});
</script>

tip

The configuration with source.defaults.service allows for combinations with custom server or RTMP urls. More examples and full documentation of the source defaults feature can be found here: Source defaults.

Option 3: Custom configuration with RTMP streamname

In most cases the simple RTMP configuration is sufficient but in case of enhanced flexibility needed or usage of older version of nanoplayer (until 4.13.0), this is a recommended configuration.

nanoplayer.html
<div id='playerDiv'></div>
<script src='https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js'></script>
<script>
var player;
var streamName = 'XXXXX-YYYYY'; // your bintu stream name (not the stream ID)
var config = {
    'source': {
        'entries': [
            {
                'h5live': {
                    'rtmp': {
                        'url': 'rtmp://bintu-play.nanocosmos.de:80/play',
                        'streamname': streamName
                    },
                    'server': {
                        'websocket': 'wss://bintu-h5live.nanocosmos.de:443/h5live/stream/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': {
        'autoplay': true,
        'automute': true,
        'muted': false,
        'faststart': true,
        'latencyControlMode': 'balancedadaptive'
    },
};
document.addEventListener('DOMContentLoaded', function () {
    player = new NanoPlayer('playerDiv');
    player.setup(config).then(function (config) {
        console.log('setup success');
        console.log('config: ' + JSON.stringify(config, undefined, 4));
    }, function (error) {
        alert(error.message);
    });
});
</script>

Option 4: Configuration with bintu stream id

<div id='playerDiv'></div>
<script src='https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js'></script>
<script>
var player;
var streamId = '1111-2222-3333-4444-5555'; // your bintu stream ID (not the stream name)
var config = {
    'source': {
        'entries': [
            {
                'bintu': {
                    'streamid': streamId
                }
            }
        ]
    },
    'playback': {
        'autoplay': true,
        'automute': true,
        'muted': false,
        'faststart': true,
        'latencyControlMode': 'balancedadaptive'
    }
};
document.addEventListener('DOMContentLoaded', function () {
    player = new NanoPlayer('playerDiv');
    player.setup(config).then(function (config) {
        console.log('setup success');
        console.log('config: ' + JSON.stringify(config, undefined, 4));
    }, function (error) {
        alert(error.message);
    });
});
</script>

Frameworks

Vue.js

Useful link:

GitHub repository

Embedding the H5LivePlayer in your Vue.js project is simple:

Include the provided nanoplayer.4.min.js script within your index.html in your root directory

index.html
<script src='https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js'></script>

Example

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <title>h5-live-player</title>
    <script src='https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js'></script>
</head>
<body>
    <div id='app'></div>
</body>
</html>

Create a new Vue Component with a simple div as a placeholder that will contain player the content.
```
<div id='playerDiv'></div>
```

Add a new variable called config to your data() method inside your component

 export default {
     data() {
         return {
             'config': {
                 'source': {
                     'defaults': {
                         'service': 'bintu'
                     },
                     'entries': [
                         {
                             'h5live': {
                                 'rtmp': {
                                     'streamname': 'XXXXX-YYYYY' // your rtmp streamname
                                 }
                             }
                         }
                     ]
                 },
                 'playback': {
                     'autoplay': true,
                     'automute': true,
                     'muted': false,
                     'faststart': true,
                     'latencyControlMode': 'balancedadaptive'
                 }
             }
         }
     }
 }

Instantiate the NanoPlayer inside the mounted() lifecycle hook

export default {
    data() { ... },
    mounted: function(){
        var nanoPlayer = new window.NanoPlayer('playerDiv');
        nanoPlayer.setup(this.config).then(function (config) {
            console.log('setup success');
            console.log('config: ' + JSON.stringify(config, undefined, 4));
        }, function (error) {
            alert(error.message);
        });
    }
}

Now you should see the player running in your browser's window.

React.js

Useful links:

Configuration steps

Import your minified nanoplayer version within your index.html in your public directory

index.html
<script  src='https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js'></script>

Example:

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <script src='https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js'></script>
    <title>H5Live Player</title>
</head>
<body>
    <div id='root'></div>
</body>
</html>

Create a React Component with a div tag, to create an entry point for the player
```
<div id='playerDiv' />
```

Add a config object to your state

let config = {
    'source': {
        'defaults': {
            'service': 'bintu'
        },
        'entries': [
                {
                    'h5live': {
                        'rtmp': {
                            'streamname': 'XXXXX-YYYYY' // your rtmp streamname
                        }
                    }
                }
        ]
    },
    'playback': {
        'autoplay': true,
        'automute': true,
        'muted': false,
        'faststart': true,
        'latencyControlMode': 'balancedadaptive'
    }
};

Setup the player

function setupNanoplayer(config) {
    var nanoPlayer = new window.NanoPlayer('playerDiv');

    nanoPlayer.setup(config).then(function (config) {
        console.log('setup success');
        console.log('config: ' + JSON.stringify(config, undefined, 4));
    }, function (error) {
        alert(error.message);
    });
};

If you are using React Hooks, initialize the setup like this:

useEffect(() => {
    setupNanoplayer(config);
}, [])

If you are not using React Hooks, initialize the setup like this:

componentDidMount() {
    setupNanoplayer(this.state.config);
}

Wordpress

Add a block and choose Custom HTML

Embed the Player

It is important to add a wrapper around the playerDiv element, otherwise you won't see the nanoStream H5Live Player

<script src='https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js'></script>
<div style='width: 480px; height: 360px; overflow: hidden; position: absolute; margin: 0; padding: 0;'>
<div id='playerDiv'></div>
</div>

<script>
        var player;
        var streamName = 'XXXXX-YYYYY'; // your bintu stream name (not the stream ID)
        var config = {
            'source': {
                'defaults': {
                    'service': 'bintu'
                },
                'entries': [
                    {
                        'h5live': {
                            'rtmp': {
                                'streamname': 'XXXXX-YYYYY' // your rtmp streamname
                            }
                        }
                    }
                ]
            },
            'playback': {
                'autoplay': true,
                'automute': true,
                'muted': false,
                'faststart': true,
                'latencyControlMode': 'balancedadaptive'
            }
        };
        player = new NanoPlayer('playerDiv');
        player.setup(config).then(function (config) {
            console.log('setup success');
            console.log('config: ' + JSON.stringify(config, undefined, 4));
        }, function (error) {
            alert(error.message);
        });
</script>

More Information

Find a product overview and live demo here.
Our API documentation can be found here.

Questions?

For business related questions reach out to our dedicated sales team via the contact form or by sending an email to sales(at)nanocosmos.de.
For technical questions you can use our support form.

Embedding H5Live player on your own web page​

Option 1: Configuration with bintu stream group​

Option 2: Simple configuration with RTMP streamname​

Option 3: Custom configuration with RTMP streamname​

Option 4: Configuration with bintu stream id​

Frameworks​

Vue.js​

React.js​

Configuration steps​

Wordpress​