npm - @bitmovin/player-web-x - Versions diffs - 10.0.0-beta.16 → 10.0.0-beta.18 - Mend

@bitmovin/player-web-x 10.0.0-beta.16 → 10.0.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (264) hide show

package/README.md CHANGED Viewed

@@ -2,141 +2,51 @@
 The next-gen Bitmovin web player.
-Welcome to the future!
+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.
-This package is several things.
+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.
-The first thing is simply a web streaming video player. Currently, this player can play HLS streams using the fMP4 segment format.
+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](https://developer.bitmovin.com/playback/docs/player-web-x-support-matrix).
-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.
+To learn more about the framework and the player, checkout our [full documentation](https://developer.bitmovin.com/playback/docs/about-player-web-x).
-Once you have a licence key, all you need to do is to include the player in your web application, and run it:
+## Getting started
-### Simple Usage Example
+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](https://developer.bitmovin.com/playback/docs/player-web-x-getting-started).
-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.
+But here we will cover only be covering the use of npm package to bundle the player into your app.
-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.
+### Using the npm package
-This returns an object which exposes the api through which playback can be controlled.
+This example shows how to use the monolithic player from npm. First you will need to install the player to your project
-```html
-<!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
-```html
-<!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:
-```shell
 npm install @bitmovin/player-web-x
 ```
 ```typescript
 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;
+const player = Player({
+  key: 'YOUR-PLAYER-KEY',
+  defaultContainer: document.getElementById('player-container')
+});
-player.sources.add('https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8');
-```
+const sourceConfig = {
+  resources: [{
+    url: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8',
+  }]
+}
-### TypeScript Package Example
+player.sources.add(sourceConfig);
+```
-This is the same, but with the packages.
+Or using the packages. In this case, you need to merge the API type yourself.
 ```typescript
 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';
@@ -149,10 +59,19 @@ import { NetworkPackage } from '@bitmovin/player-web-x/packages/playerx-network.
 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';
+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' }) as PlayerAndSourcesApi;
+const player = Player({
+  key: 'YOUR-PLAYER-KEY',
+  defaultContainer: document.getElementById('player-container')
+}) as MyApi
 player.packages.add(CapabilitiesPackage);
 player.packages.add(SegmentProcessingPackage);
@@ -166,31 +85,21 @@ player.packages.add(PresentationPackage);
 player.packages.add(SourcePackage);
 player.packages.add(AdaptationPackage);
 player.packages.add(SourcesApiPackage);
+player.packages.add(ViewModePackage);
-player.sources.add('https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8');
+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.
-> [!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](/COMPAT.md).
+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](https://developer.bitmovin.com/playback/docs/player-web-x-v8-compatibility)
 ## Package template repository
 To find out more about packages and how to build them, please check out our [package template repository](https://github.com/bitmovin/pwx-package-template). 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.