CkplayerX3整合discuz、赤兔CMS、CSCMS

tv001 · 发表于 2022-4-4 09:16:42

拎壶冲发表于 2022-3-16 18:04
1、进入DZ后台管理，界面——编辑器设置——Discuz代码，添加播放器，播放器图片放到static\image\common目 ...

按照此方式操作无数次，都没成功。请问详细教程。

拎壶冲 · 发表于 2022-4-5 18:52:58

本帖最后由拎壶冲于 2022-4-5 19:09 编辑

tv001 发表于 2022-4-4 09:16
按照此方式操作无数次，都没成功。请问详细教程。

替换内容代码：

<iframe src="http://localhost/ckplayerx3.php?url={1}" width="100%" height="470" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

复制代码

播放器图标文件放到static\image\common下即可。
播放器代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CKplayerX3播放器</title>
<link type="text/css" rel="stylesheet" href="./ckx3/css/ckplayer.css" />
<script type="text/javascript" charset="utf-8" src="./ckx3/language/zh.cn.js"></script>
<script type="text/javascript" charset="UTF-8" src="./ckx3/js/ckplayer.js"></script>
<style type="text/css">
body,html{height:100%;background-color:#000;margin:0px;padding:0px;overflow:hidden;}
#rongyao{height:100%;}
</style>
</head>
<body>
<div id="rongyao"></div>
<script type="text/javascript">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
};
var videoObject = {
container: '#rongyao',
autoplay: true,
loaded: 'loadedHandler',
screenshot:false,//截图功能是否开启
plug:'hls.js',//使用插件
rightBar:true,//是否开启右边控制栏
smallWindows:true,//是否启用小窗口模式
playbackrateOpen:true,//是否开启控制栏倍速选项
webFull:true,//是否启用页面全屏按钮，默认不启用
theatre:true,//是否启用剧场模式按钮，默认不启用
video: getQueryVariable("url")
};
var player=new ckplayer(videoObject);
</script>
</body>
</html>

复制代码

代码里的文件路径自行修改！保存为php或html 。在浏览器输入本机测试：http://localhost/ckx3.php?url=http://localhost/mp4/123.mp4或者http://localhost/ckx3.php?url=http://localhost/mp4/123.m3u8看看能否正常播放放！
添加广告

{
"autoplay": false,
"ad":{//定义广告
front:{//定义贴片广告
closeTime:5,//播放贴片广告时3秒后显示可关闭广告
closeButtonClick:'closeFront',//点击关闭按钮触发事件
list:[//贴片广告列表
{
file: 'http://localhost/ckplayerx3/ad/front02.mp4',//视频地址
type: 'video/mp4',//视频格式
link:'https://www.ckplayer.com',//链接地址
time: 5//视频时长
},
{
file: 'http://localhost/ckplayerx3/ad/6.jpg',//图片地址
type: 'picture',//广告类别定义成picture
link: 'https://www.ckplayer.com',//链接地址
time: 5//广告时长
}
]
},
pause:{//配置暂停广告
close:true,//暂停广告是否显示关闭按钮
list:[//暂停广告列表
{
file: 'http://localhost/ckplayerx3/ad/banner1.JPG',//图片
link: 'https://www.ckplayer.com',
time: 3//显示时长
},
{
file: 'http://localhost/ckplayerx3/ad/banner2.JPG',//图片
link: 'https://www.ckplayer.com',
time: 3//显示时长
},
{
file: 'http://localhost/ckplayerx3/ad/banner3.JPG',//图片
link: 'https://www.ckplayer.com',
time: 3//显示时长
},
{
file: 'http://localhost/ckplayerx3/ad/banner4.JPG',//图片
link: 'https://www.ckplayer.com',
time: 3//显示时长
}
]
}
},
"poster": "http://localhost/ckplayerx3/video/poster.png",
"preview": {
"file": ["http://localhost/ckplayerx3/video/1.png", "http://localhost/ckplayerx3/video/2.png", "http://localhost/ckplayerx3/video/3.png", "http://localhost/ckplayerx3/video/4.png"],
"scale": 2,
"thumbnail":[10,10],
"type":0
},
"video": [
["https://gcalic.v.myalicdn.com/gly01_1/index.m3u8", "video/m3u8", "高清"],
["https://gcalic.v.myalicdn.com/gly01_1/index.m3u8", "video/m3u8", "标清"],
["https://gcalic.v.myalicdn.com/gly01_1/index.m3u8", "video/m3u8", "流畅"]
]
}

复制代码

上面代码保存为xx.json文件，视频调用时前面加上website:或url

即：website:http://localhost/mp4/123.m3u8或url:http://localhost/mp4/123.m3u8)这样每个视频都可以设置不同的广告和视频背景图片！

注：用广告时，要在播放器代码里添加广告代码，参照ckplayer手册。这样已经不能再详细了！有问题再说！

1421444203 · 发表于 2022-4-19 00:56:06

哇！非常不错

mshuking · 发表于 2022-4-30 09:58:30

不完美，剧场模式网页模式实际不了。。。。

mshuking · 发表于 2022-5-4 17:32:34

我就看看，学习学习

eaforyou · 发表于 2022-10-24 01:20:03

苛求大佬讲解下 Cscms v4.2更新ck x3的步骤。。。

感谢大佬恭喜发财

		自动登录	找回密码
密码			立即注册

CkplayerX3整合discuz、赤兔CMS、CSCMS

本帖子中包含更多资源

本帖子中包含更多资源