Player Integration
SwarmCloud
# Introduction
CDNBye can be integrated into any HTML5 video player with hls.js built in.
# Hls.js
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<video id="video" controls></video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
document.querySelector('#version').innerText = `hls.js version: ${Hls.version} cdnbye version: ${Hls.engineVersion}`;
var video = document.getElementById('video');
var source = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
if(Hls.isSupported()) {
var hls = new Hls({
p2pConfig: {
live: true, // set false in VOD mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
// Other p2pConfig options provided by CDNBye
}
});
hls.loadSource(source);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
hls.p2pEngine.on('stats', function ({totalHTTPDownloaded, totalP2PDownloaded, totalP2PUploaded}) {
var total = totalHTTPDownloaded + totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
});
}
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = source;
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
</script>
# jwplayer
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CDNBye JWPlayer Demo</title>
<!-- CDNBye Plugin -->
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<!-- JWPlayer Hlsjs Provider -->
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/jwplayer.provider.hls.js"></script>
<!-- JW Player Builds -->
<script src="//ssl.p.jwpcdn.com/player/v/8.21.2/jwplayer.js"></script>
</head>
<body>
<header></header>
<center>
<div id="demoplayer"></div>
</center>
<script>
jwplayer.key = "uoW6qHjBL3KNudxKVnwa3rt5LlTakbko9e6aQ6VUyKQ=";
jwplayer('demoplayer').setup({
file: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',
width: 512,
height: 288,
autostart: true,
hlsjsConfig: {
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
live: true, // set false in vod mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
// Other p2pConfig options provided by CDNBye
}
},
});
jwplayer().on('play', function () {
jwplayer().hls.p2pEngine.on('stats', function ({totalHTTPDownloaded, totalP2PDownloaded}) {
// get totalHTTPDownloaded and totalP2PDownloaded here
})
})
</script>
</body>
</html>
# clappr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CDNBye Clappr Demo</title>
<!-- Clappr Builds -->
<script src="//cdn.jsdelivr.net/npm/@clappr/[email protected]/dist/clappr.min.js"></script>
<!-- CDNBye P2PEngine -->
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
<!-- CDNBye Clappr Plugin -->
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/clappr-plugin.min.js"></script>
</head>
<body>
<div id="player"></div>
<script>
var player = new Clappr.Player(
{
source: "https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8",
parentId: "#player",
autoPlay: true,
plugins: [CDNByeClapprPlugin],
playback: {
hlsjsConfig: {
maxBufferSize: 0, // Highly recommended setting in live mode
maxBufferLength: 10, // Highly recommended setting in live mode
liveSyncDurationCount: 10, // Highly recommended setting in live mode
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
live: true, // set false in vod mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
// Other p2pConfig options provided by CDNBye
}
}
}
});
</script>
</body>
</html>
# videojs
<html>
<head>
<title>CDNBye videojs demo</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.2/video-js.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.2/alt/video.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- videojs-hls-quality-selector -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/videojs-contrib-quality-levels.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/videojs-hls-quality-selector.min.js"></script>
<!-- cdnbye-p2p-plugin -->
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/videojs-hlsjs-plugin.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
</head>
<body>
<video id=video width=600 height=300 class="video-js vjs-default-skin" controls>
</video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
var options = {
autoplay: true,
sources:[
{
src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
},
],
html5: {
hlsjsConfig: {
// Put your hls.js config here
// debug: true,
maxBufferSize: 0,
maxBufferLength: 10,
liveSyncDurationCount: 10,
}
}
};
videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
if (P2PEngine.isSupported()) {
var engine = new P2PEngine(hlsjsInstance, {
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
var total = totalHTTPDownloaded + totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
},
});
}
});
var player = videojs('video', options);
player.hlsQualitySelector();
</script>
</body>
</html>
# Playerjs
- Introduction to Playerjs (opens new window)
- Online demo (opens new window)
Simply disable the HLS plugin in the builder and connect it separately with script tag on the page before connecting the player.
<div id="player"></div>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//site.com/playerjs.js" type="text/javascript"></script>
<script>
var player = new Playerjs({
id: "player",
file: "https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8",
hlsconfig: {
p2pConfig: {
live: true, // set false in VOD mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
}
}
});
</script>
# fluidplayer
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>
<video id='hls-video'>
<source src='https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8' type='application/x-mpegURL'/>
</video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
document.querySelector('#version').innerText = `hls.js version: ${Hls.version} cdnbye version: ${Hls.engineVersion}`;
fluidPlayer(
'hls-video',
{
layoutControls: {
fillToContainer: true
},
modules: {
configureHls: (options) => {
options.p2pConfig = {
live: true, // set false in VOD mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
var total = totalHTTPDownloaded + totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
},
// Other p2pConfig options provided by CDNBye
// http://www.cdnbye.com/en/views/web/API.html
};
return options;
},
}
}
);
</script>
# flowplayer
<!-- head section -->
<!-- skin -->
<link rel="stylesheet" href="https://releases.flowplayer.org/7.2.6/skin/skin.css">
<!-- CDNBye hls.js -->
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hls.light.min.js"></script>
<!-- flowplayer -->
<script src="//releases.flowplayer.org/7.2.6/flowplayer.min.js"></script>
<!-- body section -->
<div id="player"></div>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
document.querySelector('#version').innerText = `hls.js version: ${Hls.version} cdnbye version: ${Hls.engineVersion}`;
flowplayer('#player', {
live: true, // set if it's a live stream
ratio: 9/16, // set the aspect ratio of the stream
clip: {
sources: [
// path to the HLS m3u8
{ type: "application/x-mpegurl", src: "https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8"},
]
},
hlsjs: {
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
live: true, // set false in vod mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
var total = totalHTTPDownloaded + totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
},
// Other p2pConfig options provided by CDNBye
}
}
});
</script>
# Radiant Media Player
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<script src="https://cdn.radiantmediatechs.com/rmp/7.8.1/js/rmp.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
<div id="rmp"></div>
<script>
const src = {
hls: 'https://test-streams.mux.dev/x36xhzz/url_2/193039199_mp4_h264_aac_ld_7.m3u8'
};
// config for p2p
var p2pConfig = {
live: true,
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
}
const settings = {
licenseKey: 'your-license-key',
src: src,
width: 640,
height: 360,
forceHlsJSOnIpadOS: true,
};
const elementID = 'rmp';
const rmp = new RadiantMP(elementID);
const container = document.getElementById(elementID);
container.addEventListener('hlsinstancecreated', () => {
const hlsJSInstance = rmp.getHlsJSInstance();
if (P2PEngine.isSupported()) {
new P2PEngine(hlsJSInstance, p2pConfig);
}
});
rmp.init(settings);
</script>
</body>
</html>
# MediaElement.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CDNBye MediaElement Demo</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mediaelement@latest/build/mediaelementplayer.min.css">
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/mediaelement-and-player.min.js"></script>
</head>
<body>
<video id="player"
src="https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8"
class="mejs__player"
controls>
</video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
document.querySelector('#version').innerText = `hls.js version: ${Hls.version} cdnbye version: ${Hls.engineVersion}`;
var player = new MediaElementPlayer('player', {
hls: {
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
live: true, // set false in vod mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
var total = totalHTTPDownloaded + totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
},
// Other p2pConfig options provided by CDNBye
}
},
success: function (me) {
me.play();
}
});
</script>
</body>
</html>
# OpenPlayer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CDNBye OpenPlayer Demo</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.css">
</head>
<body>
<video class="op-player__media" id="video" controls playsinline>
<source src="https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8"></video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]"></script>
</body>
<script>
document.querySelector('#version').innerText = `hls.js version: ${Hls.version} cdnbye version: ${Hls.engineVersion}`;
var player = new OpenPlayer('video', {
hls: {
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
live: true, // set false in vod mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
var total = totalHTTPDownloaded + totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
},
// Other p2pConfig options provided by CDNBye
}
}
});
player.init();
</script>
</html>
# Plyr
<!DOCTYPE html>
<html lang="en">
<div class="container">
<video controls crossorigin playsinline></video>
</div>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<link rel="stylesheet" href="//cdn.plyr.io/3.4.7/plyr.css">
<script src="//cdn.plyr.io/3.4.7/plyr.js"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script>
document.querySelector('#version').innerText = `hls.js version: ${Hls.version} cdnbye version: ${Hls.engineVersion}`;
document.addEventListener('DOMContentLoaded', () => {
var source = 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8';
var video = document.querySelector('video');
// For more options see: https://github.com/sampotts/plyr/#options
// captions.update is required for captions to work with hls.js
var player = new Plyr(video, {
captions: {active: true, update: true, language: 'en'},
// autoplay: true,
});
if (!Hls.isSupported()) {
video.src = source;
} else {
// For more Hls.js options, see https://github.com/dailymotion/hls.js
var hls = new Hls({
p2pConfig: {
live: true, // set false in vod mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
var total = totalHTTPDownloaded + totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
},
// Other p2pConfig options provided by CDNBye
}
});
hls.loadSource(source);
hls.attachMedia(video);
window.hls = hls;
// Handle changing captions
player.on('languagechange', () => {
// Caption support is still flaky. See: https://github.com/sampotts/plyr/issues/994
setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
});
}
// Expose player so it can be used from the console
window.player = player;
});
</script>
# DPlayer
<meta charset="UTF-8">
<style type="text/css">
body,html{width:100%;height:100%;background:#000;padding:0;margin:0;overflow-x:hidden;overflow-y:hidden}
*{margin:0;border:0;padding:0;text-decoration:none}
#stats{position:fixed;top:5px;left:10px;font-size:12px;color:#fdfdfd;z-index:2147483647;text-shadow:1px 1px 1px #000, 1px 1px 1px #000}
#dplayer{position:inherit}
</style>
<div id="dplayer"></div>
<div id="stats"></div>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
var _peerId = '', _peerNum = 0, _totalP2PDownloaded = 0, _totalP2PUploaded = 0;
var type = 'normal';
if(Hls.isSupported() && Hls.WEBRTC_SUPPORT) {
type = 'customHls';
}
const dp = new DPlayer({
container: document.getElementById('dplayer'),
autoplay: true,
video: {
url: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',
type: type,
customType: {
'customHls': function (video, player) {
const hls = new Hls({
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
live: true, // set false in VOD mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
// Other p2pConfig options provided by CDNBye
}
});
hls.loadSource(video.src);
hls.attachMedia(video);
hls.p2pEngine.on('stats', function (stats) {
_totalP2PDownloaded = stats.totalP2PDownloaded;
_totalP2PUploaded = stats.totalP2PUploaded;
updateStats();
}).on('peerId', function (peerId) {
_peerId = peerId;
}).on('peers', function (peers) {
_peerNum = peers.length;
updateStats();
});
}
}
}
});
function updateStats() {
var text = 'P2P have downloaded' + (_totalP2PDownloaded/1024).toFixed(2)
+ 'MB shared ' + (_totalP2PUploaded/1024).toFixed(2) + 'MB' + ' connected ' + _peerNum + ' peers';
document.getElementById('stats').innerText = text
}
</script>
# Chimee
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CDNBye Chimee Demo</title>
<!-- Chimee Builds -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/lib/index.browser.min.js"></script>
<!-- CDNBye P2PEngine -->
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
<!-- Chimee HLS Kernel -->
<script src="//cdn.jsdelivr.net/npm/p2p-chimee-kernel-hls@latest"></script>
</head>
<body>
<div id="player"></div>
<h3>download info:</h3>
<p id="info"></p>
<script>
new Chimee({
wrapper: '#player', // video dom容器
src: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',
controls: true,
kernels: {
hls: {
maxBufferSize: 0, // Highly recommended setting in live mode
maxBufferLength: 10, // Highly recommended setting in live mode
liveSyncDurationCount: 10, // Highly recommended setting in live mode
handler: window.ChimeeKernelHls,
p2pConfig: {
live: true, // set false in VOD mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
var total = totalHTTPDownloaded + totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
},
// Other p2pConfig options provided by CDNBye
}
}
},
});
</script>
</body>
</html>
# XGPlayer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta name="referrer" content="no-referrer">
<title>CDNBye XGPlayer Demo</title>
<style type="text/css">
html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
body {display:flex;}
#mse {flex:auto;}
</style>
<script type="text/javascript">
window.addEventListener('resize',function(){document.getElementById('mse').style.height=window.innerHeight+'px';});
</script>
</head>
<body>
<div id="mse"></div>
<script src="//cdn.jsdelivr.net/npm/[email protected]/browser/index.js" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/xgplayer-hlsjs.min.js"></script>
<script type="text/javascript">
new window.HlsJsPlayer({
id: 'mse',
url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
autoplay: true,
useHls: true,
playsinline: true,
height: window.innerHeight,
width: window.innerWidth,
hlsOpts: {
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
live: true, // set false in VOD mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
console.log(`totalP2PDownloaded ${totalP2PDownloaded} totalP2PUploaded ${totalP2PUploaded} totalHTTPDownloaded ${totalHTTPDownloaded}`)
},
// Other p2pConfig options provided by CDNBye
}
}
});
</script>
</body>
</html>
# ArtPlayer
<!DOCTYPE html>
<html>
<head>
<title>ArtPlayer</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="artplayer-app" style="width:400px;height:300px"></div>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
<script>
var art = new Artplayer({
container: '.artplayer-app',
url: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',
customType: {
m3u8: function (video, url) {
var hls = new Hls({
p2pConfig: {
live: true, // set false in VOD mode
// announceLocation: 'hk', // if using Hongkong tracker
// announceLocation: 'us', // if using USA tracker
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
console.log(`totalP2PDownloaded ${totalP2PDownloaded} totalP2PUploaded ${totalP2PUploaded} totalHTTPDownloaded ${totalHTTPDownloaded}`)
},
// Other p2pConfig options provided by CDNBye
}
});
hls.loadSource(url);
hls.attachMedia(video);
},
},
});
</script>
</body>
</html>