Compatibility with Player Web Version 8.x
Player Web X is not natively compatible with our existing Web SDK's v8 API. However, the package system is powerful enough to allow us to write a compatibility layer, so that is what we have done.
⚠️ PWX is not yet feature complete. Some APIs are simple NOPs until PWX has integrated the feature.
There are currently two ways of using the v8 compatibility packages - through our v8 bundle, which is based on our HLS bundle, as well as using the v8 compatibility packages directly. Both approaches are shown below.
Using the v8 bundle
Using the v8 bundle is as simple as including the associated bundle on the page: https://cdn.bitmovin.com/player/web_x/beta/10/bundles/playerx-bitmovin-v8.js. With that bundle included, a Player Web X instance can be created just the same way a v8 Player instance was created before.
<!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="https://cdn.bitmovin.com/player/web_x/10/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>
Using the v8 compatibility packages directly
Similarly, it is also possible to add the v8 compatibility packages manually using the Package API. This allows stripping off any functionality that is included in our default HLS bundle but that your specific use case might not require.
<!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="https://cdn.bitmovin.com/player/web_x/10/bundles/playerx-bitmovin-v8-core.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-data.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-capabilities.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-hls.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-hls-translation.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-hls-parsing.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-network.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-presentation.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-source.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-sources-api.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-bitmovin-source-api.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-bitmovin-v8-static-api.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-bitmovin-ui.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-bitmovin-video-element-utils.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-adaptation.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/packages/playerx-container-mp4.package.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/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['sources-api'].default);
player.packages.add(bitmovin.playerx['bitmovin-video-element-utils'].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>
Updated 5 months ago