苹果CMS设置Dplayer播放器自动播放下一集
在苹果cms的配置中，默认的播放器不会自动播放，也不会自动播放下一集视频，需要手工修改Dplayer的代码。目前Dplayer播放器在网络上比较流行，且性能与功能方面比较出众，下面看一看如何配置Dplayer播放器。
Dplayer播放器是谁？
DPlayer 是一款可爱的 HTML5 弹幕视频播放器，可帮助人们轻松构建视频和弹幕。
DPlayer网站地址：https://dplayer.js.org/
Github项目地址：https://github.com/DIYgod/DPlayer
整合dplayer播放器增加记忆，P2P播放和自动下一集的Dplayer播放器代码
替换下面的dplayer播放器代码，替换目录苹果cms系统static/player/dplayer.html 全部内容替换即可。
<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="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:8px;font-size:12px;color:#fdfdfd;text-shadow:1px 1px 1px #000, 1px 1px 1px #000}
#dplayer{position:inherit}
</style>
<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 src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer@latest"></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 _peerId = '', _peerNum = 0, _totalP2PDownloaded = 0, _totalP2PUploaded = 0;
var dp = new DPlayer({
autoplay: true,
container: document.getElementById('dplayer'),
volume: 1.0,
preload: 'auto',
screenshot: true,
theme: '#28FF28',
video: {
url: parent.MacPlayer.PlayUrl,
type: 'customHls',
// pic: './loading.jpg', // 视频封面
customType: {
'customHls': function (video, player) {
const hls = new Hls({
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
logLevel: false,
live: false, // 如果是直播设为true
// Other p2pConfig options provided by CDNBye
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
console.warn(`totalP2PDownloaded ${totalP2PDownloaded} totalHTTPDownloaded ${totalHTTPDownloaded}`);
_totalP2PDownloaded = totalP2PDownloaded;
_totalP2PUploaded = totalP2PUploaded;
updateStats();
},
getPeerId: function (peerId) {
_peerId = peerId;
},
getPeersInfo: function (peers) {
_peerNum = peers.length;
updateStats();
},
}
});
hls.loadSource(video.src);
hls.attachMedia(video);
}
}
},
});
dp.seek(webdata.get('pay'+parent.MacPlayer.PlayUrl));
setInterval(function(){
webdata.set('pay'+parent.MacPlayer.PlayUrl,dp.video.currentTime);
},1000);
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>
<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="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:8px;font-size:12px;color:#fdfdfd;text-shadow:1px 1px 1px #000, 1px 1px 1px #000}
#dplayer{position:inherit}
</style>
<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 src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer@latest"></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 _peerId = '', _peerNum = 0, _totalP2PDownloaded = 0, _totalP2PUploaded = 0;
var dp = new DPlayer({
autoplay: true,
container: document.getElementById('dplayer'),
volume: 1.0,
preload: 'auto',
screenshot: true,
theme: '#28FF28',
video: {
url: parent.MacPlayer.PlayUrl,
type: 'customHls',
// pic: './loading.jpg', // 视频封面
customType: {
'customHls': function (video, player) {
const hls = new Hls({
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
logLevel: false,
live: false, // 如果是直播设为true
// Other p2pConfig options provided by CDNBye
getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
console.warn(`totalP2PDownloaded ${totalP2PDownloaded} totalHTTPDownloaded ${totalHTTPDownloaded}`);
_totalP2PDownloaded = totalP2PDownloaded;
_totalP2PUploaded = totalP2PUploaded;
updateStats();
},
getPeerId: function (peerId) {
_peerId = peerId;
},
getPeersInfo: function (peers) {
_peerNum = peers.length;
updateStats();
},
}
});
hls.loadSource(video.src);
hls.attachMedia(video);
}
}
},
});
dp.seek(webdata.get('pay'+parent.MacPlayer.PlayUrl));
setInterval(function(){
webdata.set('pay'+parent.MacPlayer.PlayUrl,dp.video.currentTime);
},1000);
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>
另外一种代码：
<title>dplayer播放器p2p加速+记忆播放</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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 content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<link rel="stylesheet" href="./dplayer/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>
<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 src="./dplayer/hls.min.js"></script>
<script src="./dplayer/dash.all.min.js"></script>
<script src="./dplayer/webtorrent.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="./dplayer/DPlayer.min.js"></script>
<script>
//var url = '<?php echo($_REQUEST['url']);?>';
var url = parent.MacPlayer.PlayUrl;
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,//自动播放
//screenshot: true,//截屏
hotkey: true, // 移动端全屏时向右划动快进，向左划动快退。
logo: '',//LOGO
volume: 1.0,//音量
preload: 'auto',//视频预先加载
theme: '#28FF28',//进度条颜色
lang:'zh-cn',//播放器语言
airplay:'true',
video: {
url:parent.MacPlayer.PlayUrl,
pic: '', //图片地址。
//thumbnails: './thumbnails.jpg',
type: 'customHls',
customType: {
'customHls': function (video, player) {
const hls = new Hls({
debug: false,
p2pConfig: {
logLevel: true,
live: false, // 如果是直播设为true
}
});
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();
});
}
}
},
danmaku: {
id: btoa(parent.MacPlayer.PlayUrl), //弹幕代码，可定义其他的ID，请修改；
api: 'https://dplayer.moerats.com/',
bottom: '25%',
unlimited: false,
},
//contextmenu: [
//{
//text: 'YEYEXIU',
//link: 'https://yeyexiu.com',
//},
//],
highlight: [
{
text: '',
time: 0,
},
]
});
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('pay'+parent.MacPlayer.PlayUrl));
setInterval(function(){
webdata.set('pay'+parent.MacPlayer.PlayUrl,dp.video.currentTime);
},1000);
dp.on('playing',function () {
//间隔两秒则自动隐藏
setTimeout(function(){
//为播放器添加隐藏工具条样式
document.getElementById("dplayer").classList.add("dplayer-hide-controller");
}, 10000);
});
dp.on('ended',function() {
if(parent.MacPlayer.PlayLinkNext!=''){
top.location.href = parent.MacPlayer.PlayLinkNext;
}
});
}
else{
document.getElementById('dplayer').innerHTML='<video src="'+parent.MacPlayer.PlayUrl+'" 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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 content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<link rel="stylesheet" href="./dplayer/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>
<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 src="./dplayer/hls.min.js"></script>
<script src="./dplayer/dash.all.min.js"></script>
<script src="./dplayer/webtorrent.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="./dplayer/DPlayer.min.js"></script>
<script>
//var url = '<?php echo($_REQUEST['url']);?>';
var url = parent.MacPlayer.PlayUrl;
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,//自动播放
//screenshot: true,//截屏
hotkey: true, // 移动端全屏时向右划动快进，向左划动快退。
logo: '',//LOGO
volume: 1.0,//音量
preload: 'auto',//视频预先加载
theme: '#28FF28',//进度条颜色
lang:'zh-cn',//播放器语言
airplay:'true',
video: {
url:parent.MacPlayer.PlayUrl,
pic: '', //图片地址。
//thumbnails: './thumbnails.jpg',
type: 'customHls',
customType: {
'customHls': function (video, player) {
const hls = new Hls({
debug: false,
p2pConfig: {
logLevel: true,
live: false, // 如果是直播设为true
}
});
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();
});
}
}
},
danmaku: {
id: btoa(parent.MacPlayer.PlayUrl), //弹幕代码，可定义其他的ID，请修改；
api: 'https://dplayer.moerats.com/',
bottom: '25%',
unlimited: false,
},
//contextmenu: [
//{
//text: 'YEYEXIU',
//link: 'https://yeyexiu.com',
//},
//],
highlight: [
{
text: '',
time: 0,
},
]
});
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('pay'+parent.MacPlayer.PlayUrl));
setInterval(function(){
webdata.set('pay'+parent.MacPlayer.PlayUrl,dp.video.currentTime);
},1000);
dp.on('playing',function () {
//间隔两秒则自动隐藏
setTimeout(function(){
//为播放器添加隐藏工具条样式
document.getElementById("dplayer").classList.add("dplayer-hide-controller");
}, 10000);
});
dp.on('ended',function() {
if(parent.MacPlayer.PlayLinkNext!=''){
top.location.href = parent.MacPlayer.PlayLinkNext;
}
});
}
else{
document.getElementById('dplayer').innerHTML='<video src="'+parent.MacPlayer.PlayUrl+'" 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>
