苹果CMSV10整合DPLAYER播放器,增加记忆+P2P播放+自动下一集
2024-08-16 共人阅读本文介绍如何为苹果CMS V10整合DPlayer播放器，并加入记忆播放、P2P播放加速以及自动播放下一集等功能。通过修改苹果CMS V10播放器文件，可以在原有播放页面基础上增加更加丰富的视频播放功能。
播放器主要功能
DPlayer播放器：使用DPlayer作为视频播放界面。
记忆播放：自动记录当前视频播放进度，下次打开相同播放地址时可以继续播放。
P2P播放：通过P2P相关配置实现视频播放加速。
自动下一集：当前视频播放结束后，如果存在下一集地址，则自动跳转播放。
HLS支持：通过HLS.js处理M3U8视频播放。
FLV支持：引入FLV.js，为相关视频格式提供播放支持。
苹果CMS V10 DPlayer播放器代码
下面是完整的播放器代码，可以根据自己的服务器环境以及播放器资源地址进行调整。
<html>
<head>
<title>dplayer播放器p2p加速+记忆播放</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta http-equiv="content-language" content="zh-CN"/>
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta name="referrer" content="never"/>
<meta name="renderer" content="webkit"/>
<meta name="msapplication-tap-highlight" content="no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="x5-page-mode" content="app"/>
<meta name="Viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<link rel="stylesheet" href="//www.seeso.cc/dplayerp2p/DPlayer.min.css" type="text/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:8px;font-size:12px;color:#fdfdfd;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 language="Javascript">
document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false");
</script>
<script type="text/javascript" src="//www.seeso.cc/dplayerp2p/hls.min.js"></script>
<script type="text/javascript" src="//www.seeso.cc/dplayerp2p/flv.min.js"></script>
<script type="text/javascript" src="//www.seeso.cc/dplayerp2p/DPlayer.min.js"></script>
<script type="text/javascript" src="//www.seeso.cc/dplayerp2p/jquery.min.js"></script>
<script type="text/javascript" src="//www.seeso.cc/dplayerp2p/p2p.js"></script>
<script>
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();
}
};
var dp = new DPlayer({
autoplay: true,
container: document.getElementById('dplayer'),
video: {
url: parent.MacPlayer.PlayUrl,
type: 'hls',
pic: 'https://www.seeso.cc/webp2p/loading_wap.jpg'
},
volume: 1.0,
preload: 'auto',
screenshot: true,
theme: '#28FF28',
hlsjsConfig: {
p2pConfig: {
logLevel: true,
live: false,
announce: "https://tracker.cdnbye.com:8090/v1"
}
}
});
dp.seek(webdata.get('pay'+parent.MacPlayer.PlayUrl));
setInterval(function(){
webdata.set('pay'+parent.MacPlayer.PlayUrl,dp.video.currentTime);
},1000);
var _peerId = '';
var _peerNum = 0;
var _totalP2PDownloaded = 0;
var _totalP2PUploaded = 0;
dp.on('stats', function (stats) {
_totalP2PDownloaded = stats.totalP2PDownloaded;
_totalP2PUploaded = stats.totalP2PUploaded;
updateStats();
});
dp.on('peerId', function (peerId) {
_peerId = peerId;
});
dp.on('peers', function (peers) {
_peerNum = peers.length;
updateStats();
});
dp.on('ended', function (){
if(parent.MacPlayer.PlayLinkNext!=''){
top.location.href = parent.MacPlayer.PlayLinkNext;
}
});
function updateStats() {
var text = 'P2P已开启 共享'
+ (_totalP2PUploaded/1024).toFixed(2)
+ 'MB 已加速'
+ (_totalP2PDownloaded/1024).toFixed(2)
+ 'MB 此片有 '
+ _peerNum
+ ' 位影迷正在观看';
document.getElementById('stats').innerText = text;
}
</script>
<span style="display: none;">
<script src="https://s19.cnzz.com/z_stat.php?id=1275012176&web_id=1275012176" language="JavaScript"></script>
</span>
</body>
</html>播放器代码说明
该播放器通过 parent.MacPlayer.PlayUrl 获取苹果CMS当前视频播放地址，因此通常用于苹果CMS播放器页面中。
播放结束后，代码会检测 parent.MacPlayer.PlayLinkNext 是否存在下一集地址。如果存在，则自动跳转到下一集，实现连续播放效果。
记忆播放功能
代码通过浏览器的 sessionStorage 保存当前视频播放进度，并使用播放地址作为数据索引：
webdata.set('pay'+parent.MacPlayer.PlayUrl,dp.video.currentTime);播放器初始化时再读取之前保存的时间：
dp.seek(webdata.get('pay'+parent.MacPlayer.PlayUrl));因此，同一个浏览器会话中再次打开相同播放地址时，可以恢复之前记录的播放位置。由于使用的是 sessionStorage，实际保存周期和浏览器会话有关。
P2P播放加速
播放器通过HLS.js以及P2P相关配置启用P2P播放功能，并设置了P2P Tracker地址：
hlsjsConfig: {
p2pConfig: {
logLevel: true,
live: false,
announce: "https://tracker.cdnbye.com:8090/v1"
}
}需要注意，P2P实际加速效果取决于视频格式、网络环境、Tracker服务以及同时观看该资源的用户数量，并不能保证所有视频都能够获得明显的加速效果。
自动播放下一集
代码监听DPlayer的 ended 事件，当当前视频播放完成后，会检测苹果CMS播放器提供的下一集地址：
dp.on('ended', function (){
if(parent.MacPlayer.PlayLinkNext!=''){
top.location.href = parent.MacPlayer.PlayLinkNext;
}
});如果 parent.MacPlayer.PlayLinkNext 存在有效地址，播放器就会自动跳转到下一集。
远程JS文件说明
该播放器引用了DPlayer、HLS.js、FLV.js、jQuery以及P2P相关JS文件。部分资源可以进行本地化部署，但远程代码可能会持续更新。
如果选择将JS文件下载到自己的网站，建议定期检查上游版本更新情况；如果希望直接使用最新版本，则需要根据实际情况决定是否继续使用远程JS资源。
安装方法
安装前建议先备份原来的播放器文件，避免修改后出现播放异常时无法恢复。
第一步：打开苹果CMS网站根目录中的播放器目录：
static/player/
第二步：找到播放器文件：
static/player/dplayer.html
第三步：将原有 dplayer.html 文件内容备份，然后使用上面的完整代码替换原文件内容并保存。
第四步：进入网站播放页面进行测试，重点检查视频播放、记忆播放、P2P状态以及自动下一集功能是否正常。
完整压缩包安装
如果不方便手动替换播放器代码，也可以使用对应的完整播放器压缩包。解压后将播放器文件放入苹果CMS的：
static/player/
安装完成后建议清理网站缓存和浏览器缓存，再重新打开播放页面进行测试。
使用注意事项
安装前建议备份原有
static/player/dplayer.html文件。远程JS资源依赖第三方服务器，第三方资源的可用性可能发生变化。
如果将远程JS文件本地化，需要自行关注后续版本更新。
P2P播放效果受到用户数量、网络环境及相关服务状态影响。
记忆播放使用浏览器存储机制，不属于服务器端保存播放进度。
如果修改苹果CMS播放器核心变量或模板结构，可能需要同步调整播放器代码。
总结
通过整合DPlayer，苹果CMS V10可以实现更加丰富的视频播放功能，包括记忆播放、P2P播放加速和自动下一集等。安装方式比较简单，主要修改 static/player/dplayer.html 文件即可。
不过，该方案依赖多个JavaScript资源以及P2P相关服务，实际使用时应根据自身服务器、视频格式和网络环境进行测试，并定期检查第三方资源的可用性。