# 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!