Player Integration
# Introduction
CDNBye can be integrated into any HTML5 video player with shaka-player built in.
# Shaka-Player
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shaka Player with P2P Engine (HLS or MPEG-DASH)</title>
<script src="//cdn.jsdelivr.net/npm/mux.js@5.6.7/dist/mux.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
</head>
<body>
<video id="video" width="640" controls autoplay></video>
<p id="version"></p>
<h3>p2p info:</h3>
<p id="peers"></p>
<p id="info"></p>
<script>
shaka.polyfill.installAll();
document.querySelector('#version').innerText = `p2p version: ${P2PEngineShaka.version}`;
var video = document.getElementById("video");
var player = new shaka.Player(video);
var onError = function(error) { console.error("Error code", error.code, "object", error); }
player.addEventListener("error", function(event) { onError(event.detail); });
if (P2PEngineShaka.isSupported()) {
var engine = new P2PEngineShaka(player, {
// logLevel: 'debug',
});
engine.on('stats', function (stats) {
var total = stats.totalHTTPDownloaded + stats.totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(stats.totalP2PDownloaded/total*100)}% saved traffic: ${Math.round(stats.totalP2PDownloaded)}KB upload: ${Math.round(stats.totalP2PUploaded)}KB`;
})
engine.on('peers', function (peers) {
document.querySelector('#peers').innerText = `peers: ${peers.length}`;
})
}
player.load(
"https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"
).catch(onError);
</script>
</body>
</html>
# Clappr
Introduction to dash-shaka-playback
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clappr player with shaka-p2p-engine (MPEG-DASH only)</title>
<script src="//cdn.jsdelivr.net/npm/@clappr/player@0.4.0/dist/clappr.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/mux.js@5.6.7/dist/mux.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/clappr/dash-shaka-playback@latest/dist/dash-shaka-playback.external.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
<style>
#video {
width: 720px;
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
</head>
<body>
<div id="video"></div>
<script>
var player = new Clappr.Player({
parentId: "#video",
source: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd",
plugins: [DashShakaPlayback],
shakaOnBeforeLoad: function(shakaPlayerInstance) {
if (P2PEngineShaka.isSupported()) {
new P2PEngineShaka(shakaPlayerInstance, {
logLevel: 'debug',
});
}
}
});
player.play();
</script>
</body>
</html>
# videojs
<link href="http://vjs.zencdn.net/5.19.2/video-js.css" rel="stylesheet">
<video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls></video>
<script src="https://cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>
<script src="https://vjs.zencdn.net/5.19.2/video.js"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-shaka@0.4.5/dist/videojs-shaka.min.js"></script>
<script>
var player = videojs('example-video', {
techOrder: ['shaka'],
// shaka: {
// debug: true
// }
});
new P2PEngineShaka(player.tech_.shaka_, {
logLevel: 'debug'
})
player.ready(function() {
player.src({
src: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
type: 'application/dash+xml'
});
player.play();
});
</script>
# DPlayer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DPlayer with shaka-p2p-engine</title>
<script src="//cdn.jsdelivr.net/npm/mux.js@5.6.7/dist/mux.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.css">
<script src="//cdn.jsdelivr.net/npm/dplayer@1.25.0"></script>
<style>
#dplayer {
width: 720px;
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
</head>
<body>
<div id="dplayer"></div>
<script>
shaka.polyfill.installAll();
window.dp = new DPlayer({
container: document.getElementById("dplayer"),
video: {
url: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd",
type: "customHlsOrDash",
customType: {
"customHlsOrDash": function (video, player) {
const src = video.src; // Shaka Player changes video.src to blob URL
const shakaPlayer = new shaka.Player(video);
if (P2PEngineShaka.isSupported()) {
new P2PEngineShaka(shakaPlayer, {
logLevel: 'debug',
});
}
const onError = function(error) { console.error("Error code", error.code, "object", error); }
shakaPlayer.addEventListener("error", function(event) { onError(event.detail); });
shakaPlayer.load(src).catch(onError);
}
}
}
});
</script>
</body>
</html>
# Plyr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Plyr player with shaka-p2p-engine</title>
<link rel="stylesheet" href="//cdn.plyr.io/3.5.6/plyr.css">
<script src="//cdn.plyr.io/3.5.6/plyr.js"></script>
<script src="//cdn.jsdelivr.net/npm/mux.js@5.6.7/dist/mux.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
<script src="//cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>
<style>
#wrapper {
width: 720px;
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
</head>
<body>
<div id="wrapper">
<video id="video" controls></video>
</div>
<script>
var video = document.getElementById("video");
var player = new Plyr(video);
shaka.polyfill.installAll();
var shakaPlayer = new shaka.Player(video);
if (P2PEngineShaka.isSupported()) {
new P2PEngineShaka(shakaPlayer, {
logLevel: 'debug',
});
}
shakaPlayer.load("https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd");
</script>
</body>
</html>