npm - @bitmovin/player-web-x - Versions diffs - 10.0.0-beta.9 → 10.1.0 - Mend

@bitmovin/player-web-x 10.0.0-beta.9 → 10.1.0

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 (319) 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,105 @@
+# 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](https://developer.bitmovin.com/playback/docs/player-web-x-support-matrix).
+To learn more about the framework and the player, checkout our [full documentation](https://developer.bitmovin.com/playback/docs/about-player-web-x).
+## 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](https://developer.bitmovin.com/playback/docs/player-web-x-getting-started).
+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
+```
+```typescript
+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.
+```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 { 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](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.