[object Object] Icon

Encoding
Learn how to create, start, manage and modify Encodings

[object Object] Icon

Player
Learn how to create, start, manage and modify Players

[object Object] Icon

Analytics
Learn how to create, start, manage and modify Analyticss

Docs Home
User shortcuts for search
Focus by pressing f
Hide results by pressing Esc
Navigate via   keys

Fri Jun 28 2019

Integrating Bitmovin Player with Streamroot

RequirementsLink Icon

InstallationLink Icon

CDN hosted version

Include these sources in the HTML <head>. Make sure to replace YOUR_STREAMROOT_KEY in the Streamroot Plugin Source URL with our own STREAMROOT_KEY.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <!-- Bitmovin Player build -->
5 <script src="//cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
6 <!-- Streamroot plugin -->
7 <script src="//cdn.streamroot.io/bitmovin-dna-plugin/1/stable/bitmovin-dna-plugin.js#streamrootKey=YOUR_STREAMROOT_KEY"></script>
8</head>
9<body>
10 <!-- any code -->
11</body>
12</html>

NPM

1<!-- Bitmovin Player build -->
2npm install bitmovin-player -S
3
4<!-- Streamroot plugin -->
5npm install @streamroot/bitmovin-dna-plugin

ConfigurationLink Icon

CDH hosted version

For a list of Streamroot dnaConfig parameters please check out their documentation.

1<div id="my-player"></div>
2<script>
3 var bitmovinConfig = {
4 key: 'BITMOVIN_PLAYER_KEY',
5 dnaConfig: {},
6 live: {
7 lowLatency:{
8 targetLatency: 30
9 }
10 }
11 };
12 window.addEventListener("load", function() {
13 player = new bitmovin.player.Player(
14 document.getElementById("bitmovin-player"),
15 bitmovinConfig
16 );
17 player
18 .load({
19 //Streamroot DNA requirement: Only one playlist URL must be set at a time.
20 hls: "YOUR_PLAYLIST_URL"
21 //dash: 'YOUR_PLAYLIST_URL',
22 //smooth: 'YOUR_PLAYLIST_URL'
23 })
24 .then(function() {
25 player.play();
26 });
27 });
28</script>

NPM bundle

1import { Player } from 'bitmovin-player';
2import { bitmovinDnaExtend } from '@streamroot/bitmovin-dna-plugin';
3
4// Extend player class with DNA
5var DNABitmovinPlayer = bitmovinDnaExtend(Player, 'YOUR_STREAMROOT_KEY');
6
7var bitmovinConfig = {
8 key: 'YOUR_BITMOVIN_KEY',
9 dnaConfig: {},
10 live:{
11 lowLatency:{
12 targetLatency: 30
13 }
14 }
15};
16
17// Instanciate player
18var player = new DNABitmovinPlayer(videoElement, bitmovinConfig);
19
20// Load stream
21player.load({
22 //Streamroot DNA requirement: Only one playlist URL must be set at a time.
23 hls: "YOUR_PLAYLIST_URL"
24 //dash: 'YOUR_PLAYLIST_URL',
25 //smooth: 'YOUR_PLAYLIST_URL'
26});

Enabling Streamroot on Safari / macOSLink Icon

On Safari/macOS, the stream will be played through the Safari Native Player by default. In order for Streamroot DNA to be activated on Safari, you will need to configure the player to use Bitmovin HLS HTML5 playback by default, if supported. To do so, add a preferredTech in the Bitmovin configuration object.

1var playerConfig = {
2 key: "YOUR-BITMOVIN-KEY",
3 playback: {
4 preferredTech: [
5 {player: 'html5', streaming: 'hls'}
6 ]
7 }
8};

Hint: This applies to Safari on macOS only. In Safari on iOS, only Safari's native player is allowed to be used due to restrictions from Apple.

Full ExampleLink Icon

A full example is available on Streamroot's Github Repository. An actual demo showcasing the Streamroot plugin and the Bitmovin Player is available here.

Give us feedback