Player Integration
# Introduction
CDNBye can be integrated into any HTML5 video player with hls.js built in.
# videojs
<html>
<head>
<title>CDNBye videojs demo</title>
<link href="//vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.8.2/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<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/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',
}
],
html5: {
hlsjsConfig: {
// Put your hls.js config here
maxBufferSize: 0, // Highly recommended setting in live mode
maxBufferLength: 10, // Highly recommended setting in live mode
liveSyncDurationCount: 10, // Highly recommended setting in live mode
}
}
};
videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
if (P2PEngine.isSupported()) {
var engine = new P2PEngine(hlsjsInstance, {
// logLevel: 'debug',
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);
</script>
</body>
</html>
# 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: {
logLevel: true,
live: false, // set as true in live mode
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>
# 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>
<!-- JW Player Builds -->
<script src="//ssl.p.jwpcdn.com/player/v/8.0.11/jwplayer.js"></script>
<!-- JWPlayer Hlsjs Provider -->
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/jwplayer.hlsjs.provider.min.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: {
logLevel: true,
live: false, // set as true in live mode
// 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@0.4.0/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: {
logLevel: 'debug',
live: false, // set as true in live mode
// Other p2pConfig options provided by CDNBye
}
}
}
});
</script>
</body>
</html>
# MediaElement.js
Introduction to 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/mediaelement@4.2.16/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: {
logLevel: true,
live: false, // set as true in live mode
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/openplayerjs@2.0.0"></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: {
logLevel: 'debug',
live: false, // set to true in live mode
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: {
logLevel: true,
live: false, // set as true in live mode
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>
# Playerjs
Introduction to Playerjs
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: {
logLevel: true,
live: false, // set as true in live mode
}
}
});
</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 = {
logLevel: true,
live: false, // set to true in live mode
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>
# DPlayer
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.css">
<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/dplayer@1.25.0"></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: {
logLevel: 'debug',
live: false, // set as true in live mode
// 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>
# CKPlayer
Introduction to CKPlayer
See P2P-CKPlayer
<!DOCTYPE html>
<html>
<body>
<div id="video" style="width: 100%; height: 400px;max-width: 600px;"></div>
<h3>download info:</h3>
<p id="info"></p>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/p2p-ckplayer@latest/ckplayer/ckplayer.min.js" charset="UTF-8"></script>
<script type="text/javascript">
var videoObject = {
container: '#video', // “#”代表容器的ID，“.”或“”代表容器的class
variable: 'player', // 该属性必需设置，值等于下面的new chplayer()的对象
autoplay:true,
html5m3u8:true, // 强制html5播放
video:'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',//视频地址
hlsjsConfig: { // hlsjs和CDNBye的配置参数
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
logLevel: 'debug',
live: false, // set as true in live mode
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
// https://docs.cdnbye.com/#/en/API
}
}
};
var player = new ckplayer(videoObject);
</script>
</body>
</html>
# TCPlayer
<!DOCTYPE html>
<html lang="en">
<head>
<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, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>CDNBye TCPlayer Demo</title>
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-tap-highlight" content="no">
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="video-container" style="margin: 0px auto;">
</div>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.3.js"></script>
<script>
document.querySelector('#version').innerText = `hls.js version: ${Hls.version} cdnbye version: ${Hls.engineVersion}`;
var options = {
m3u8: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8' ,
autoplay: true,
live: false,
width: '480',
height: '320',
hlsConfig: {
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
logLevel: true,
live: false, // set as true in live mode
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
}
}
};
var player = new TcPlayer('video-container', options);
window.qcplayer = player;
</script>
</body>
</html>
# Chimee
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CDNBye Chimee Demo</title>
<!-- Chimee Builds -->
<script src="//cdn.jsdelivr.net/npm/chimee@0.11.0/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: {
logLevel: 'debug',
live: false, // set as true in live mode
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/xgplayer@1.1.4-beta.3/browser/index.js" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//cdn.jsdelivr.net/npm/p2p-xgplayer-hlsjs@latest"></script>
<script type="text/javascript">
new window.HlsJsPlayer({
id: 'mse',
url: '//video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
autoplay: true,
playsinline: true,
height: window.innerHeight,
width: window.innerWidth,
useHls: true,
hlsOpts: {
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
logLevel: true,
live: false, // set as true in live mode
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
console.log(`totalP2PDownloaded ${totalP2PDownloaded} totalP2PUploaded ${totalP2PUploaded} totalHTTPDownloaded ${totalHTTPDownloaded}`)
},
// Other p2pConfig options provided by CDNBye
}
}
});
</script>
</body>
</html>
# CHPlayer
Introduction to CHPlayer
See P2P-CHPlayer
<!DOCTYPE html>
<html>
<body>
<div id="video" style="width: 100%; height: 400px;max-width: 600px;"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p2p-chplayer@latest/chplayer/chplayer.min.js" charset="UTF-8"></script>
<script type="text/javascript">
var videoObject = {
container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
autoplay: true,
html5m3u8: true,
video: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',//视频地址
hlsjsConfig: { // hlsjs和CDNBye的配置参数
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
logLevel: true,
live: false,
// Other p2pConfig options provided by CDNBye
// https://github.com/cdnbye/hlsjs-p2p-engine/blob/master/docs/%E4%B8%AD%E6%96%87/API.md
}
}
};
var player = new chplayer(videoObject);
</script>
</body>
</html>