player-web-x

The next-gen Bitmovin web player.

Player Web X (PWX for short) is a new video player for the web that we at Bitmovin developed. It is based on an in-house developed library that we call the Phoenix Framework.

The Phoenix Framework is built from the ground up with fundamentals such as structured concurrency, an effect system and a package first architecture in mind that facilitates extensibility. Player Web X is built on a state-driven architecture that is built on top of the framework. Player Web X is developed with focus on making a highly performant player, with different, smaller and purpose built bundles comprised of different packages, as well as a Package API. Package API allows custom behaviours and functionalities to be built externally to the player, enabling our customers to support their own use cases without ever needing our help.

Currently, Player Web X has support for HLS streams that use the fMP4 and TS segment formats and partial support for DASH streams and muxed content. For a more detailed and complete listing of supported features, please refer to the Support Matrix.

To learn more about the framework and the player, checkout our full documentation.

Getting started

The easiest way of getting started with Player Web X is to use our bundles from cdn and a simple HTML page to embed the player on. You can read more about different approaches in our getting started page.

But here we will cover only be covering the use of npm package to bundle the player into your app.

Using the npm package

This example shows how to use the monolithic player from npm. First you will need to install the player to your project

npm install @bitmovin/player-web-x

import { Player } from '@bitmovin/player-web-x/bundles/playerx-hls';

const player = Player({
  key: 'YOUR-PLAYER-KEY',
  defaultContainer: document.getElementById('player-container')
});

const sourceConfig = {
  resources: [{
    url: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8',
  }]
}

player.sources.add(sourceConfig);

Or using the packages. In this case, you need to merge the API type yourself.

import { Player } from '@bitmovin/player-web-x/bundles/playerx-core';
import { AdaptationPackage } from '@bitmovin/player-web-x/packages/playerx-adaptation.package';
import { CapabilitiesPackage } from '@bitmovin/player-web-x/packages/playerx-capabilities.package';
import { ContainerMp4Package } from '@bitmovin/player-web-x/packages/playerx-container-mp4.package';
import { DataPackage } from '@bitmovin/player-web-x/packages/playerx-data.package';
import { HlsPackage } from '@bitmovin/player-web-x/packages/playerx-hls.package';
import { HlsParsingPackage } from '@bitmovin/player-web-x/packages/playerx-hls-parsing.package';
import { HlsTranslationPackage } from '@bitmovin/player-web-x/packages/playerx-hls-translation.package';
import { NetworkPackage } from '@bitmovin/player-web-x/packages/playerx-network.package';
import { PresentationPackage } from '@bitmovin/player-web-x/packages/playerx-presentation.package';
import { SegmentProcessingPackage } from '@bitmovin/player-web-x/packages/playerx-segment-processing.package';
import { SourcePackage } from '@bitmovin/player-web-x/packages/playerx-source.package';
import { SourcesApiPackage }  from '@bitmovin/player-web-x/packages/playerx-sources-api.package';
import { ViewModePackage }  from '@bitmovin/player-web-x/packages/playerx-view-mode.package';
import type { ViewModeApi } from '@bitmovin/player-web-x/types/framework/core/view-mode/Types'
import type { SourceApiBase, SourcesApi } from '@bitmovin/player-web-x/types/framework/core/sources-api/Types'
import type { PlayerApi }  from '@bitmovin/player-web-x/types/framework/core/player-api/Types'

type SourceApi = SourceApiBase & ViewModeApi;
type MyApi = PlayerApi & SourcesApi<SourceApi>;

const player = Player({
  key: 'YOUR-PLAYER-KEY',
  defaultContainer: document.getElementById('player-container')
}) as MyApi

player.packages.add(CapabilitiesPackage);
player.packages.add(SegmentProcessingPackage);
player.packages.add(ContainerMp4Package);
player.packages.add(DataPackage);
player.packages.add(NetworkPackage);
player.packages.add(HlsTranslationPackage);
player.packages.add(HlsParsingPackage);
player.packages.add(HlsPackage);
player.packages.add(PresentationPackage);
player.packages.add(SourcePackage);
player.packages.add(AdaptationPackage);
player.packages.add(SourcesApiPackage);
player.packages.add(ViewModePackage);

const sourceConfig = {
  resources: [{
    url: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8',
  }]
}

player.sources.add(sourceConfig);

Bitmovin Player V8 compatibility

To avoid disruption, we have also built a compatibility layer to allow you to use this player as a dropin for v8 - read more about it in our documentation

Package template repository

To find out more about packages and how to build them, please check out our package template repository. It includes examples of packages of various types, and also functions as a package build system.