Getting started with the Modular Web Player
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 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:
| Popular Use case / features | Required modules |
|---|---|
| DASH + fMP4 + DRM + Thumbnails | -ABR - ContainerMP4 - EngineBitmovin - RendererMSE - DASH - DRM - Thumbnail - XML |
| HLS + MPEG-TS+ AES-128 + Client-side ads | - ABR - ContainerTS - EngineBitmovin - RendererMSE - AdvertisingCore - AdvertisingBitmovin - Crypto - HLS |
Use the table below to get an overview of all available modules and their functionality:
| Module | Functionality | Required by default |
|---|---|---|
| ABR | Adaptation logic | Yes |
| ContainerMP4 ContainerTS ContainerWebM | Parsing and processing of specific container formats | Yes (for non-progressive on all browsers, except HLS on Safari; depending on container format) |
| EngineBitmovin | Adaptive Streaming capabilities for a wide variety of platforms | Yes (for non-progressive on all browsers, except HLS on Safari) |
| RendererMse | Video rendering for DASH / HLS / Smooth using the browser's Media Source Extensions | Yes (for non-progressive on all browsers, except HLS on Safari) |
| AdvertisingBitmovin AdvertisingCore AdvertisingIma | Enables Client-side ad insertion (CSAI) with VAST/VMAP. Only one of AdvertisingBitmovin and AdvertisingIma is required and can be active at the same time. | No |
| AdvertisingOmSdk | Ad verification with the Open Measurement SDK | No |
| Crypto | Support for HLS AES-128 or DASH ClearKey streams | No |
| DASH | MPEG-DASH support | No |
| DRM | Support for a variety of DRM systems (Widevine, PlayReady, PrimeTime, Fairplay) | No |
| EngineNative | Use native browser capabilities (raw video element) to play back progressive or HLS sources (if supported by browser) | No |
| EngineWebRtc | WebRTC playback capabilities | No |
| Envivio | Support for non-to-spec streams from the Envivio packager | No |
| HLS | HLS support | No |
| LowLatency | Low latency live streaming support | No |
| Patch | Workarounds for platform bugs on certain Chromecast devices | No |
| PlayStation4 | Support for PS4 WebMAF apps | No |
| PlayStation5 | Enables tweaks for PS5 MediaSDK | No |
| Polyfill | Support for JavaScript features like (e.g. Promise) on legacy browsers | No |
| RemoteControl | Use the player as remote control for Chromecast or WebSockets | No |
| ServiceWorkerClient | Communication support for ServiceWorkers | No |
| Smooth | Enables support for Microsoft Smooth Streaming | No |
| Style | Provides styling of the player | No |
| Subtitles SubtitlesCEA608 SubtitlesNative SubtitlesTTML SubtitlesWebVTT | Subtitle processing for the desired formats. SubtitlesNative is only needed in combination with EngineNative. | No |
| Thumbnail | DASH and WebVTT thumbnail support | No |
| Tizen | Support for Tizen TVs (especially older 2016/2017 models) and DRM related customisations | No |
| UI | Loads the default Bitmovin Player UI | No |
| VR | Rendering of 360° video content | No |
| WebOS | DRM related specific handling on WebOS platforms | No |
| XML | XML file handling (e.g. for DASH or VAST manifests) | No |
Updated 10 days ago