Dplayer播放器集成P2P加速

HONG • • 网站建设, 资源分享

最近突然发现以前的Dplayer播放器的P2P加速功能没有了，我还以为是我网站用了CDN的问题，去折腾半天发现原来是支持P2P加速功能的CDNBYE改版了，折腾两下还是把它弄出来了，给自己的小博客加个播放器也挺不错的。P2P加速播放器的优点就是观看的人越多，速度就越快，玩过苹果CMS的朋友应该挺喜欢这个功能

下图是CDNBYE的示例页面

CDNBYEP2P加速界面

注册CDNBYE账号

CDNBYE官方网站 www.cdnbye.com/oms/ 必须要先注册CDNBYE的账号，因为播放器的P2P加速功能要靠它实现，注册之后到CDNBYE后台绑定好自己的网站就好了，CDNBYE每天免费提供25G流量，需求量大的可以自己购买流量套餐

CDNBYE后台绑定域名

布置Dplayer播放器

在网站根目录新建一个Dplayer.php的空文件，将下面代码填进去保存即可

<html>
<head>
<title>P2P加速视频解析</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/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}
#stats{position:fixed;top:5px;left:10px;font-size:10px;color:#fdfdfd;z-index:20719029;text-shadow:1px 1px 1px #000, 1px 1px 1px #000}
#dplayer{position:inherit}
</style>
</head>
<body style="background:#000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" oncontextmenu=window.event.returnValue=false>
<div id="dplayer"></div>
<div id="stats"></div>
<script src="https://cdn.jsdelivr.net/npm/swarmcloud-hls@latest/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer@latest"></script>
<script>
var url = '<?php echo($_REQUEST['url']);?>';
var isWap = navigator.userAgent.match(/iPad|iPhone|iPod|Baidu/i) != null; //百度浏览器和苹果移动端不使用P2P功能
if(!isWap){
if(url.indexOf(".m3u8") > 0){ 
var _peerId = '', _peerNum = 0, _totalP2PDownloaded = 0, _totalP2PUploaded = 0; 
var type = 'customHls';
}
else {
var type = 'normal'; //MP4格式P2P兼容性不好，不调用P2P。
}
var dp = new DPlayer({
container: document.getElementById('dplayer'),
autoplay: true,
hotkey: true, // 移动端全屏时向右划动快进，向左划动快退。
logo: '',
video: {
url:url,
pic: '', //图片地址。
type: type,
customType: {
'customHls': function (video, player) {
const hls = new Hls({
debug: false,
p2pConfig: {
logLevel: true,
live: false, // 如果是直播设为true
  // logLevel: 'debug',
         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();
});

}
}
}, 
contextmenu: [
{
text: 'HongNote',
link: 'https://www.hongnote.cn',
},
],
});
var webdata = {
set:function(key,val){
window.sessionStorage.setItem(key,val);
},
get:function(key){
return window.sessionStorage.getItem(key);
},
del:function(key){
window.sessionStorage.removeItem(key);
},
clear:function(key){
window.sessionStorage.clear();
}
};
dp.seek(webdata.get('vod'+url));
setInterval(function(){
webdata.set('vod'+url,dp.video.currentTime);
},1000);
dp.on('ended',function() {
dp.notice("视频播放已结束"); //可以替换成下一集调用等代码
if(parent.MacPlayer.PlayLinkNext!=''){
top.location.href = parent.MacPlayer.PlayLinkNext;}
}); 
}
else{
document.getElementById('dplayer').innerHTML='<video src="'+url+'" controls="controls" preload="preload" poster="" width="100%" height="100%" autoplay="autoplay"></video>';
}
function updateStats() {
var text = 'P2P正在为您加速' + (_totalP2PDownloaded/1024).toFixed(2)
+ 'MB 已分享' + (_totalP2PUploaded/1024).toFixed(2) + 'MB' + ' 连接节点' + _peerNum + '个';
document.getElementById('stats').innerText = text ;
}
</script>
</body>
</html>

如果不想复制，我这里也有做好打包的dplayer.php文件，放在目录里就可以用

Dplayer播放器集成p2p加速
来源：默认网盘 | 提取码：www.hongnote.cn

保存之后访问你的播放器连接就是你的网站/dplayer.php?url= url=后面填写m3u8视频资源链接即可播放，连续开两个播发器页面同时解析一个资源就能在左上角看到P2P加速信息，下图就是播放器的效果

P2P加速播放器效果

用iframe框架将播放器集成在内容上

iframe是html的一个标签，通过它你可以在一个浏览器窗口显示不止一个页面，并且iframe框架可以通过超链接显示任意页面，我们就正可以利用这个标签的特性来将播放器引用在内容里，如果想要了解得透彻一点可以去w3cschool或者菜鸟教程的html教程里了解

<!--简单iframe代码如下-->
<iframe src="你的播放器url" name="iframe_a" width="宽度" height="高度"></iframe>

上方这个代码就是一个简单的视频播放器框架了，我们还需要一个超链接来调用它

<!--超链接代码如下-->
<a href="你的网站/dplayer.php?url=资源链接"target="iframe_a">点击我播放视频资源</a>

超链接target值必须要跟iframe中name的值对应，不然它是不会引用这个框架的，前面框架中的url可以不是播放器页面，你可以自定义一个html页面

示例如下

点我播放视频

要注意，有的浏览器是不支持p2p加速播放功能的，QQ浏览器 Chrome这些主流浏览器都是支持的，我的这个框架因为是示例做得比较粗糙，动手能力强的可以自己美化一下

版权声明：
文章标题：Dplayer播放器集成P2P加速
文章作者：HONG
文章链接：https://www.hongnote.cn/51.html
CC共享协议许可协议：BY-NC-SA 4.0
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录