The easiest way of getting started with Player Web X is to use our bundles and a simple HTML page to embed the player on. There is, however, also the option to use the packaged player rather than a bundle - that might be useful, for example, if your use case only requires playback of HLS streams with fMP4 segments. In that case you would not need any of the packages that are required for supporting TS segments. Lastly there is also the option to use the npm package to bundle the player into your app.

All of those options are shown in this section. In the examples below the Player key is deliberately left out. In order to use those samples, you need to specify your own player key.

🚧
Player Web X currently only supports hosted apps
Attempting to load the player with the file://protocol will cause the player to throw an error.

Using a bundle

In this example, the player is loaded using a bundle - the HLS bundle to be more precise. Once that file is loaded, the player is available on the namespace bitmovin.playerx.Player and can be instantiated by passing a config to the constructor function.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bitmovin Player Web X Demo</title>
  <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/bundles/playerx-hls.js"></script>
  <style>
    #player-container {
      width: 95%;
      margin: 20px auto;
    }
    video {
      display: block;
    }
  </style>
</head>
<body>
<div id="player-container"></div>

<script type="text/javascript">
  const player = bitmovin.playerx.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',
    }]
  }

  const sourceApi = player.sources.add(sourceConfig);
</script>
</body>
</html>

Our HLS and DASH bundles by default are using SourcesApi package, which adds ability to add and control multiple sources at the same time. Refer to the Features section for more details on how our multi-source API works.

Using packages

The following example, by contrast, loads the packages one by one, effectively building a player out of its constituent parts. This would allow you to build targeted players for streams with different formats or features for example, while remaining as lightweight as possible.

All our packages are connected to the bitmovin.playerx namespace here, but that is a configuration choice. Third-party package authors can use different namespaces if desired.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bitmovin Player Web X Demo</title>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/bundles/playerx-core.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-capabilities.package.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-segment-processing.package.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-container-mp4.package.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-data.package.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-network.package.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-hls-translation.package.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-hls-parsing.package.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-hls.package.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-presentation.package.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-source.package.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-sources-api.package.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-adaptation.package.js"></script>

    <style>
        #player-container {
            width: 95%;
            margin: 20px auto;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
        }
        video {
            display: block;
        }
    </style>
</head>
<body>
<div id="player-container"></div>
<script type="text/javascript">
    const player = bitmovin.playerx.Player({
        key: 'YOUR-PLAYER-KEY',
        defaultContainer: document.getElementById("player-container")
    });

    player.packages.add(bitmovin.playerx['capabilities'].default);
    player.packages.add(bitmovin.playerx['segment-processing'].default);
    player.packages.add(bitmovin.playerx['container-mp4'].default);
    player.packages.add(bitmovin.playerx['data'].default);
    player.packages.add(bitmovin.playerx['network'].default);
    player.packages.add(bitmovin.playerx['hls-translation'].default);
    player.packages.add(bitmovin.playerx['hls-parsing'].default);
    player.packages.add(bitmovin.playerx['hls'].default);
    player.packages.add(bitmovin.playerx['presentation'].default);
    player.packages.add(bitmovin.playerx['source'].default);
    player.packages.add(bitmovin.playerx['sources-api'].default);
    player.packages.add(bitmovin.playerx['adaptation'].default);

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

  const sourceApi = player.sources.add(sourceConfig);</script>
</body>
</html>

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

Then we are able to access bundles directly from node modules.

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

Getting started

🚧
Player Web X currently only supports hosted apps

Using a bundle

Using packages

Using the npm package

🚧Player Web X currently only supports hosted apps

Using a bundle

Using packages

Using the npm package

🚧
Player Web X currently only supports hosted apps