Getting started · nanocosmos Documentation

Embedding H5Live player on your own web page

You can embed this code snippet to test the H5Live player on your page in no time.

Important: replace CUSTOM-STREAMID with your own streamid.

Note:

If you don't know how to get your custom bintu.live streamid click here .

You find a code sample on the demo player on the bintu dashboard. Here is an recommended example configuration and code which runs on any web page:

<div id="playerDiv"></div>
<script src="https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js?20200806"></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": true
    },
    "style": {
        "displayMutedAutoplay": true
    }
};
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>

Alternative configuration with bintu stream id

<div id="playerDiv"></div>
<script src="https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js?20200227"></script>
<script>
var player;
var streamId = "1111-2222-3333-4444-5555"; // your bintu stream ID (not the stream name)
var config = {
    "source": {
        "entries": [
            {
                "bintu": {
                    "apiurl": "https://bintu.nanocosmos.de",
                    "streamid": streamId
                }
            }
        ]
    },
    "playback": {
        "autoplay": true,
        "automute": true,
        "muted": false
    },
    "style": {
        "controls": true
    }
};
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

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

<script src="https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js?20200227"></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?20200227"></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

Important: replace CUSTOM-STREAMID with your own streamid

**Note: **

If you don't know how to get your custom streamid click here .

<script>
    export default {
      data() {
        return {
          "config": {
            "source": {
              "entries": [
                {
                  "bintu": {
                      "apiurl": "https://bintu.nanocosmos.de",
                      "streamid": "CUSTOM-STREAMID"
                  }
                }
              ]
            },
            "playback": {
                "autoplay": true,
                "automute": true,
                "muted": false,
                "flashplayer": "//demo.nanocosmos.de/nanoplayer/nano.player.swf"
            },
            "style": {
                "controls": true
            }
          }
        }
      }
    }
</script>

Note:

Change the bintu streamid inside the config object to the streamid of your created live stream.

Here you can find a guide on how to create your own livestream with bintu.live

Instantiate the NanoPlayer inside the mounted() lifecycle hook

<script>
  export default {
    data() { ... },
    mounted: function(){
      var nanoPlayer = new 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);
      });
    }
  }
</script>

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

React.js

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

<script  src="https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js?20191114"></script>

Example:

<!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?20200326"></script>
    <title>H5Live Player</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Create a React Component with a div tag, to create a entrypoint for the player

<div id="playerDiv" />

Add a config object to your state

let config = {
    "source": {
        "entries": [
            {
                "bintu": {
                    "apiurl": "https://bintu.nanocosmos.de",
                    "streamid": "CUSTOM-STREAMID"
                }
            }
        ]
    },
    "playback": {
        "autoplay": true,
        "automute": true,
        "muted": false,
        "flashplayer": "//demo.nanocosmos.de/nanoplayer/nano.player.swf"
    },
    "style": {
        "controls": true
    }
};

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 wont see the nanoStream H5Live Player

<script src="https://demo.nanocosmos.de/nanoplayer/api/release/nanoplayer.4.min.js?20200302"></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": {
                "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": true
            },
            "style": {
                "displayMutedAutoplay": true
            }
        };
        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>