@bitmovin/player-web-x

v10.0.0-beta.15

Published

6 days ago

The Bitmovin HTML5 Adaptive Streaming Player for MPEG-DASH and HLS

Downloads

107

0High
0Medium
0Low

bitadmin

html5 video player html5 video html5 video thumbnail dash player mpeg dash player bitmovin dash player mpeg dash example mpeg dash sample streams hls player hls html5 HTML5 player skin video player skins html5 video browser support html5 web player

player-web-x

The next-gen Bitmovin web player.

Welcome to the future!

This package is several things.

The first thing is simply a web streaming video player. Currently, this player can play HLS streams using the fMP4 segment format.

If that's what you need, you are in luck, as it's a high performance player. So let's dive into how to implement it in your web application or page.

You will need a Bitmovin player account, you can sign up for either Player or Streams here: https://dashboard.bitmovin.com/signup. If you just want to kick the tyres, don't worry, we offer a fully featured trial account, no credit card needed.

Once you have a licence key, all you need to do is to include the player in your web application, and run it:

Simple Usage Example

This is an example of the HTML that would be required to run the player in a page as a monolith. This leverages our build system to compile together multiple packages into one loadable file.

Once the 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.

This returns an object which exposes the api through which playback can be controlled.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bitmovin Player Web X Demo</title>
  <script type="text/javascript" src="./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',
  });

  const source = player.sources.add('https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8');
</script>
</body>
</html>

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 without a problem.

Package Example

<!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="./bundles/playerx-core.js"></script>
    <script type="text/javascript" src="./packages/playerx-capabilities.package.js"></script>
    <script type="text/javascript" src="./packages/playerx-segment-processing.package.js"></script>
    <script type="text/javascript" src="./packages/playerx-container-mp4.package.js"></script>
    <script type="text/javascript" src="./packages/playerx-data.package.js"></script>
    <script type="text/javascript" src="./packages/playerx-network.package.js"></script>
    <script type="text/javascript" src="./packages/playerx-hls-translation.package.js"></script>
    <script type="text/javascript" src="./packages/playerx-hls-parsing.package.js"></script>
    <script type="text/javascript" src="./packages/playerx-hls.package.js"></script>
    <script type="text/javascript" src="./packages/playerx-presentation.package.js"></script>
    <script type="text/javascript" src="./packages/playerx-source.package.js"></script>
    <script type="text/javascript" src="./packages/playerx-sources-api.package.js"></script>
    <script type="text/javascript" src="./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',
    });

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

    player.sources.add('https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8');
</script>
</body>
</html>

Simple TypeScript Usage Example

This example shows how to use the monolithic player from npm. First you will need to install the player (this package) to your project:

npm install @bitmovin/player-web-x

import { Player } from '@bitmovin/player-web-x/bundles/playerx-hls';
import type { PlayerAndSourcesApi } from '@bitmovin/player-web-x/types/framework/core/sources-api/Types';

const player = Player({ key: 'YOUR-PLAYER-KEY' }) as PlayerAndSourcesApi;

player.sources.add('https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8');

TypeScript Package Example

This is the same, but with the packages.

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 type { PlayerAndSourcesApi } from '@bitmovin/player-web-x/types/framework/core/sources-api/Types';

const player = Player({ key: 'YOUR-PLAYER-KEY' }) as PlayerAndSourcesApi;

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.sources.add('https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8');

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.

[!CAUTION] This Player is not yet feature complete. Only use it as a replacement for V8 if it covers your use case.
To find out how to use this compatibility mode, please see COMPAT.md.

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.

Why is this player different?

Above, it was mentioned that this package is several things. Let's return to that statement a bit. More than just being a player, PWX can also be seen as a playback platform. This is because it is built using our custom framework, Phoenix (now you know where that namespace comes from). The framework is a structured concurrency implementation which is designed to be plugin first: on its own it doesn't implement any business logic, which is all loaded via packages. That is what the call to bitmovin.playerx.Player does in fact, it just loads the framework. You can see that all functionality, even network requests, are added subsequently. What this means for our users is that by using packages, any conceivable integration is possible (and usually fairly easy) to accomplish. We will soon release some examples of adding functionality via packages.

That is what is meant by playback platform. If your app or website is based around playback, Player Web X will allow you to build a tailored, powerful and performant integration to support your business needs.

We're very excited about that.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme