Bitmovin Player API 8.185.0

Using the API

The entry point to the Bitmovin Player is the static API that can be used to create player instances. The static API is either available as a global namespace on the window object when including bitmovinplayer.js via <script> tag into a HTML page, or as a local object when used as NPM package or loaded through RequireJS.

A player instance loaded via <script> tag into the global namespace is created and used like this, where container-id is an ID of a DOM element where the player will be loaded into:

var config = {
key: 'MY-PLAYER-KEY',
};

var player = new bitmovin.player.Player(document.getElementById('container-id'), config);

player.on(bitmovin.player.PlayerEvent.Playing, () => console.log('player is playing'));

A player instance from the NPM package is created and used like this:

import { Player, PlayerEvent } from 'bitmovin-player';

const config = {
key: 'MY-PLAYER-KEY',
};

const player = new Player(document.getElementById('container-id'), config);

player.on(PlayerEvent.Playing, () => console.log('player is playing'));

The created player exposes the Player API that can be used to load the source and configure and control the player:

player
.load({
dash: 'https://path/to/mpd/file.mpd',
hls: 'https://path/to/hls/playlist/file.m3u8',
smooth: 'https://path/to/manifest/file/Manifest',
})
.then(() => {
player.play();
});

The API is not available anymore after destroy.

Key

Specifying a key in the player config is mandatory on all domains except localhost. The personal key can be found in the Bitmovin Dashboard and should be specified as string. Do not forget to add all your domains (subdomains are included) to your account.

Modular Bitmovin Player

Usage

  1. Require the player core
  2. Add needed Modules to the core using .addModule(...)
  3. Use the player as usual

The player will throw an error from the addModule call if a module dependency is not satisfied, i.e. if a required module is not loaded or the order of addition is wrong. It will throw an error during runtime if a lazily required module isn't loaded.

import { Player, PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
import BitmovinEngineModule from 'bitmovin-player/modules/bitmovinplayer-engine-bitmovin';
import MSERendererModule from 'bitmovin-player/modules/bitmovinplayer-mserenderer';
import HLSModule from 'bitmovin-player/modules/bitmovinplayer-hls';
import ABRModule from 'bitmovin-player/modules/bitmovinplayer-abr';
import TSContainerModule from 'bitmovin-player/modules/bitmovinplayer-container-ts';

Player.addModule(BitmovinEngineModule);
Player.addModule(MSERendererModule);
Player.addModule(HLSModule);
Player.addModule(ABRModule);
Player.addModule(TSContainerModule);

const config = {
key: 'YOUR-PLAYER-KEY',
};

const source = {
hls: '//bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
};

const player = new Player(document.getElementById('container-id'), config);

player.on(PlayerEvent.Playing, () => console.log('player is playing'));

player
.load(source)
.then(() => {
player.play();
})
.catch(reason => {
console.error('player load failed', reason);
});

Util API

The Util API is supposed to simplify integration work and it will provide a collection of useful methods and tools.

PlayerConfigBuilder

The player config builder simplifies the player configuration by providing a simplified API and out of the box utility methods to cover the most common use cases.

The following example shows how platform specific defaults can be applied by using the PlayerConfigBuilder:

NPM example
import { Player, util } from 'bitmovin-player';

const config = new util.PlayerConfigBuilder("MY-PLAYER-KEY")
.optimizeForPlatform({ appId: "my.tv-app.id" })
.build();

const player = new Player(document.getElementById('container-id'), config);
JS example
const config = new bitmovin.player.util.PlayerConfigBuilder("MY-PLAYER-KEY")
.optimizeForPlatform({ appId: "my.tv-app.id" })
.build();

var player = new bitmovin.player.Player(document.getElementById("container-id"), config);

Quicklinks