Player Configuration

This guide will focus on streamlining setting up and optimizing the configuration of the Web SDK by using the PlayerConfigBuilder. By using this builder, you can simplify the process of generating the right configuration based on platform best practices and a convenient fluent API.

Getting Started

The example is pretty basic and a default config with your player key by using the PlayerConfigBuilder.

import { Player, util } from 'bitmovin-player/modules/bitmovinplayer-core';

const config = new util.PlayerConfigBuilder("MY-PLAYER-KEY")
  .optimizeForPlatform()
  .build();

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

const config = new bitmovin.player.util.PlayerConfigBuilder("MY-PLAYER-KEY")
  .optimizeForPlatform()
  .build();

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

After the configuration has been built you can change and manipulate the config to your liking. The following config will for example configure the player to start muted autoplay.

const config = new util.PlayerConfigBuilder("MY-PLAYER-KEY")
  .build();

config.playback = {
  muted: true,
  autoplay: true
}  

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

After this basic example let's explore some more functions the PlayerConfigBuilder offers.

Combining with a custom config

The configuration generated by the PlayerConfigBuilder can be easily combined with you existing config, either by using it as a base, or using the mergeWith method to override certain settings.

const myBaseConfig = {
  key: 'MY-PLAYER-KEY',
  playback: { muted: true }
};

const myOverrideConfig = {
  buffer: {
    video: { forwardduration: 20 }
  }
};
const config = new util.PlayerConfigBuilder(myBaseConfig)
  .optimizeForPlatform()
  .mergeWith(myOverrideConfig)
  .build();

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

This results in a config, that:

• is based on myBaseConfig, which
• is potentially overridden and extended by the platform optimization, which
• is again overridden by myOverrideConfig

Overrides will be deep-merged, meaning that any existing object properties that are not included in the override config, even those that are not on the highest level, will be preserved.

Platform Optimization

The PlayerConfigBuilder offers a method to optimize your configuration for a specific platform. It will apply some known best practices for certain platforms such as Samsung Tizen or LG webOS. These optimisations include changes to parameters like buffer level or specific tweaks based on Bitmovin’s extensive experience with these devices. After the config is generated you can also change it again and tailor the configuration to your needs.

import { Player, util } from 'bitmovin-player/modules/bitmovinplayer-core';

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

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

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);

Low-Latency Live Streaming

The PlayerConfigBuilder provides an enableLowLatencymethod to easily configure low-latency playback for MPEG-DASH and Apple HLS live streams.

This method adds a LowLatencyConfig that makes the player maintain a certain target latency from the live edge of the stream. The desired latency can be passed in as an optional parameter and defaults to 5 seconds if not provided. Additionally, a client-time sync config is added and certain player parameters are adjusted via tweaks to facilitate smooth playback under low-buffer conditions.

import { Player, util } from 'bitmovin-player/modules/bitmovinplayer-core';

const config = new util.PlayerConfigBuilder("MY-PLAYER-KEY")
  .enableLowLatency() // default target latency of 5
  // or
  .enableLowLatency({ targetLatency: 3 }) // custom target latency of 3
  .build();

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

const config = new bitmovin.player.util.PlayerConfigBuilder("MY-PLAYER-KEY")
  .enableLowLatency() // default target latency of 5
  // or
  .enableLowLatency({ targetLatency: 3 }) // custom target latency of 3
  .build();

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

Check out this configuration guide for low-latency streaming with the Bitmovin Web SDK for more in-depth information about low-latency streaming and related configuration options