npm - @bitmovin/player-web-x - Versions diffs - 10.0.0-beta.10 - Mend

@bitmovin/player-web-x 10.0.0-beta.10

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 (255) hide show

package/COMPAT.md ADDED Viewed

@@ -0,0 +1,201 @@
+# Compatibility with v8
+PWX is not natively compatible with v8, as it is a new design. However, the package system is powerful enough to allow us to write a compatibility layer, so that is what we have done.
+Here are some examples of usage:
+## Easy mode
+Just include the compatibility bundle:
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Bitmovin Player 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">
+  <!-- Bitmovin Player X with v8 compatibility packages -->
+  <script type="text/javascript" src="./sdk/bundles/playerx-bitmovin-v8.js"></script>
+  <style>
+      .container {
+          color: white;
+          text-align: center;
+          max-width: 2200px;
+      }
+      .container a {
+          color: white;
+      }
+      .container h1 {
+          margin-bottom: 22px;
+          line-height: 66px;
+      }
+      .container h2 {
+          font-weight: normal;
+          margin-bottom: 36px;
+          line-height: 26px;
+      }
+      .player-wrapper {
+          width: 95%;
+          max-height: 95%;
+          margin: 20px auto;
+          box-shadow: 0 0 30px rgba(0,0,0,0.7);
+      }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="content">
+    <div class="player-wrapper">
+      <div id="player"></div>
+    </div>
+  </div>
+</div>
+<script type="text/javascript">
+   // This part is just like with the Bitmovin Player v8 :)
+  const conf = {
+    key: '<YOUR PLAYER KEY>',
+    playback: { autoplay: true, muted: true },
+    logs: { level: 'debug' },
+    events: {},
+    location: {
+      ui: 'https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.js',
+      ui_css: 'https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.css',
+    },
+  };
+  const source = {
+    hls: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8',
+  };
+  const player = new bitmovin.player.Player(document.getElementById('player'), conf);
+  player.load(source);
+</script>
+</body>
+</html>
+```
+## Package mode
+In this version, you can see we include the individual packages:
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Bitmovin Player 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">
+  <!-- Bitmovin Player X with v8 compatibility packages -->
+  <script type="text/javascript" src="./sdk/bundles/playerx-bitmovin-v8-core.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-data.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-capabilities.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-hls.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-hls-translation.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-hls-parsing.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-network.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-presentation.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-source.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-source-api.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-bitmovin-source-api.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-bitmovin-v8-static-api.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-bitmovin-ui.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-bitmovin-video-element-utils.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-adaptation.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-container-mp4.package.js"></script>
+  <script type="text/javascript" src="./sdk/packages/playerx-segment-processing.package.js"></script>
+  <style>
+      .container {
+          color: white;
+          text-align: center;
+          max-width: 2200px;
+      }
+      .container a {
+          color: white;
+      }
+      .container h1 {
+          margin-bottom: 22px;
+          line-height: 66px;
+      }
+      .container h2 {
+          font-weight: normal;
+          margin-bottom: 36px;
+          line-height: 26px;
+      }
+      .player-wrapper {
+          width: 95%;
+          max-height: 95%;
+          margin: 20px auto;
+          box-shadow: 0 0 30px rgba(0,0,0,0.7);
+      }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="content">
+    <div class="player-wrapper">
+      <div id="player"></div>
+    </div>
+  </div>
+</div>
+<script type="text/javascript">
+  // Once again, just like with v8
+  const conf = {
+    key: '<YOUR PLAYER KEY>',
+    playback: { autoplay: true, muted: true },
+    logs: { level: 'debug' },
+    events: {},
+    location: {
+      ui: 'https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.js',
+      ui_css: 'https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.css',
+    },
+  };
+  const source = {
+    hls: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8',
+  };
+  const player = new bitmovin.player.Player(document.getElementById('player'), conf);
+  // Slightly different: once the player is instantiated, we can add the packages.
+  player.packages.add(bitmovin.playerx['data'].default);
+  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['adaptation'].default);
+  player.packages.add(bitmovin.playerx['network'].default);
+  player.packages.add(bitmovin.playerx['hls'].default);
+  player.packages.add(bitmovin.playerx['hls-translation'].default);
+  player.packages.add(bitmovin.playerx['hls-parsing'].default);
+  player.packages.add(bitmovin.playerx['presentation'].default);
+  player.packages.add(bitmovin.playerx['source'].default);
+  player.packages.add(bitmovin.playerx['bitmovin-video-element-utils'].default);
+  player.packages.add(bitmovin.playerx['source-api'].default);
+  player.packages.add(bitmovin.playerx['bitmovin-v8-static-api'].default);
+  player.packages.add(bitmovin.playerx['bitmovin-source-api'].default);
+  player.packages.add(bitmovin.playerx['bitmovin-ui'].default);  // Note the addition of the ui compatibility layer
+  // Load a source as usual
+  player.load(source);
+</script>
+</body>
+</html>
+```
+That's all there is to it!

package/README.md ADDED Viewed

@@ -0,0 +1,196 @@
+# 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.
+```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;
+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.
+```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';
+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](/COMPAT.md).
+## 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.

package/bundles/playerx-bitmovin-v8-core.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from '../types/bundles/BitmovinV8Core.bundle';