Getting started with the Modular Web Player

Introduction

In Getting started with the Web SDK, you've learned how to set up a basic playback scenario with the Bitmovin Player Web SDK. In this example, the monolith player gets loaded, which is packed with pretty much all available features.

In many cases however, you don't need to load everything, because your usecase is limited to a subset of our supported features. This is where the modular player enters the game. With our modular approach (supported since v8.0.0), you can customise the loaded player parts to your liking, which increases performance and page load times due to drastically decreased file size.

📘

Examples & Documentation

We have sample code for setting up a modular player whether you load the player from CDN or via embed it NPM to get you started quickly.

Also make sure to check out our API documentation where you can find names and dependencies between modules.

Some popular use cases would require the following module combinations:

Best Practices

Import and add only the Modules you need

To get the best out of the modular player architecture, ensure that you only import what you need. For example, there is no need to add the DASH module when all your streams are HLS.

Avoid Imports from the Monolith Player

When setting up a modular player, ensure that any imports are done from the modules, and not from the monolith player. This can lead to unexpected behavior as described in How to import player modules? . Furthermore, it will unnecessarily increase the bundle size.

⚠️ Note that many IDEs will automatically suggest to import from the monolith, so ensure that you double-check the imports.

Examples

Bad - Example of wrong imports causing unexpected behaviors:

// monolith or module first - order does not matter
import { Player } from 'bitmovin-player/modules/bitmovinplayer-core';
import { PlayerEvent } from 'bitmovin-player';
import EngineBitmovinModule from 'bitmovin-player/modules/bitmovinplayer-engine-bitmovin';
import MseRendererModule from 'bitmovin-player/modules/bitmovinplayer-mserenderer';

Good - Example of correct imports:

import { Player, PlayerEvent } from 'bitmovin-player/modules/bitmovinplayer-core';
import EngineBitmovinModule from 'bitmovin-player/modules/bitmovinplayer-engine-bitmovin';
import MseRendererModule from 'bitmovin-player/modules/bitmovinplayer-mserenderer';

Good - Example of correct imports (PlayerEvent is only imported as a type):

import { Player } from 'bitmovin-player/modules/bitmovinplayer-core';
import type { PlayerEvent } from 'bitmovin-player';
import EngineBitmovinModule from 'bitmovin-player/modules/bitmovinplayer-engine-bitmovin';
import MseRendererModule from 'bitmovin-player/modules/bitmovinplayer-mserenderer';

Available Modules

Use the table below to get an overview of all available modules and their functionality: