npm - @bitmovin/player-web-x - Versions diffs - 10.0.0-beta.2 → 10.0.0-beta.5 - Mend

@bitmovin/player-web-x 10.0.0-beta.2 → 10.0.0-beta.5

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 (928) 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="./bundles/playerx-bitdash.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-bitdash-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-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-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 CHANGED Viewed

@@ -170,6 +170,16 @@ 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).
 ## 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.