第三方播放器
# 简介
以下为部分播放器集成示例，当然您也可以尝试集成到其他HTML5播放器中。
# CBPlayer
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/p2p-dplayer@latest/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}
#dplayer{position:inherit}
</style>
<div id="dplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/cdnbye-mp4@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/cbplayer2@latest"></script>
<script>
var dp = new CBPlayer({
container: document.getElementById('dplayer'),
playState: true, // 记忆播放
video: {
url: 'https://webtorrent.io/torrents/Sintel/Sintel.mp4',
},
pluginOptions: {
mp4: {
autoplay: true,
p2pConfig: {
// logLevel: 'debug',
// Other p2pConfig options provided by CDNBye
}
}
},
});
</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-mp4@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(P2PEngineMp4.isSupported()) {
type = 'customMp4';
}
const dp = new DPlayer({
container: document.getElementById('dplayer'),
autoplay: true,
video: {
url: 'https://webtorrent.io/torrents/Sintel/Sintel.mp4',
type: type,
hotkey: true, // 移动端全屏时向右划动快进，向左划动快退。
customType: {
'customMp4': function (video, player) {
var mp4 = new P2PEngineMp4(video, {
autoplay: true,
});
mp4.loadSource(video.src);
mp4.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正在为您加速' + (_totalP2PDownloaded/1024).toFixed(2)
+ 'MB 已分享' + (_totalP2PUploaded/1024).toFixed(2) + 'MB' + ' 连接节点' + _peerNum + '个';
document.getElementById('stats').innerText = text
}
</script>
# videojs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Videojs-contrib-mp4</title>
<link href="http://vjs.zencdn.net/5.19.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.19.2/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye-mp4@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye-mp4@latest/dist/videojs-contrib-mp4.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
</video>
<script>
var player = videojs('#player', {
sources:[
{
src: 'https://webtorrent.io/torrents/Sintel/Sintel.mp4',
}
],
html5: {
mp4Config: {
p2pConfig: {
// logLevel: 'debug',
// Other p2pConfig options provided by CDNBye
}
}
}
});
</script>
</body>
</html>
# clappr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CDNBye Clappr Demo</title>
<script src="//cdn.jsdelivr.net/npm/@clappr/player@0.4.0/dist/clappr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye-mp4@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye-mp4@latest/dist/clappr-plugin-mp4.min.js"></script>
</head>
<body>
<div id="player"></div>
<script>
var player = new Clappr.Player(
{
source: "https://webtorrent.io/torrents/Sintel/Sintel.mp4",
parentId: "#player",
// autoPlay: true,
plugins: {
playback: [CDNByeClapprPlugin]
},
playback: {
mp4Config: {
p2pConfig: {
// logLevel: 'debug',
// Other p2pConfig options provided by CDNBye
}
}
}
});
</script>
</body>
</html>
# flowplayer
<!-- head section -->
<!-- skin -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css">
<!-- CDNBye plugin -->
<script src="https://cdn.jsdelivr.net/npm/cdnbye-mp4@latest"></script>
<!-- flowplayer -->
<script src="//cdn.flowplayer.com/releases/native/stable/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 = `cdnbye version: ${P2PEngineMp4.version}`;
var player = flowplayer('#player', {
autoplay: false // must set false
})
var mp4 = new P2PEngineMp4(player, {
autoplay: true,
p2pConfig: {
// logLevel: 'debug',
}
})
mp4.loadSource('https://webtorrent.io/torrents/Sintel/Sintel.mp4');
mp4.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`;
})
</script>