ckplayer支持 m3u8,mp4,ts,flv 等格式,挺好用的。
不得不说,搜索引擎搜到的答案和ai回答的都是错误答案。
添加ckplayer播放器后,采集只需要采集m3u8资源,播放器都用自己的,既稳定,还能省去可能第三方有广告的问题。
从官网下载安装包
下载后解压,有一个 ckplayer 文件夹,放到自己网站的static/player
里面。
文件夹应该是这样的:
添加播放器
在static/player
下面新建两个文件,分别是 ckplayer.html
和ckplayer.js
ckplayer.html 内容
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<title>ckplayer播放器</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">
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#playerCnt {
width: 100%;
height: 100%;
position: relative;
}
</style>
<link rel="stylesheet" type="text/css" href="/static/player/ckplayer/css/ckplayer.ixigua.css">
<script type="text/javascript" charset="utf-8" src="/static/player/ckplayer/js/ckplayer.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/player/ckplayer/flv.js/flv.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/player/ckplayer/hls.js/hls.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/player/ckplayer/mpegts.js/mpegts.min.js"></script>
<script type="text/javascript">
var plug = "normal";
var live = false;
// var url = parent.MacPlayer.PlayUrl;
var url;
try {
url = parent.MacPlayer.PlayUrl;
} catch (error) {
console.error("Unable to retrieve parent.MacPlayer.PlayUrl:", error);
document.getElementById('playerCnt').innerHTML = '<p style="color: red; text-align: center; padding-top: 20px;">视频加载错误</p>';
}
var urlhz = url.split(".").pop().toLowerCase();
// if (urlhz = "m3u8") { plug = "hls.js"; } else if (urlhz = "flv") { plug = "flv.js"; } else if (urlhz = "ts") { plug = "mpegts.js"; } else if (urlhz = "mp4") { plug = ""; } else { plug = ""; }
if (urlhz === "m3u8") { plug = "hls.js"; }
else if (urlhz === "flv") { plug = "flv.js"; }
else if (urlhz === "ts") { plug = "mpegts.js"; }
else if (urlhz === "mp4") { plug = ""; }
else { plug = ""; }
var videoObject = {
container: ".playerCnt", //容器的ID或className
volume: 0.6, //默认音量 0~1
autoplay: true, //是否自动播放
loop: false, //是否循环播放
rightBar: false,//是否显示右侧工具栏
// screenshot: false,//是否支持截图
// smallWindows: false,//是否开启小窗口播放
// webFull: false, //是否开启网页全屏
// theatre: false,//是否启用剧场模式按钮,默认不启用
plug: plug,
live: false,//是否直播
controls: false,//是否显示自带控制栏
// rotate: 0,//旋转90度
seek: 'cookie',//指定跳转到cookie记录的时间,使用该属性必需配置属性cookie
cookie: 'czlvideo',//cookie名称,请在同一域中保持唯一
// domain: 'nas.czl.net',//cookie有效域名
barHideTime: 100,//控制栏隐藏时间
playbackrateOpen: true,//是否开启控制栏倍速选项
playbackrateList: [0.75, 1, 1.25, 1.5, 2, 4],//倍速配置值
mouseWheelVolume: 2,//是否启用鼠标滚轮调节音量功能,0=不启用,1=启用,2=全屏时才启用
keyVolume: 2,//是否启用键盘控制音量调节,0=不启用,1=启用,2=全屏时才启用
next: {
link: parent.MacPlayer.PlayLinkNext,
content: ".video-next"
},
menu: [
{
title: "ckplayer",
link: "https://czl.net"
},
{
title: "version:X3",
underline: true
},
{
title: "关于视频",
click: "aboutShow"
}
],
information: {
"视频加载:": "{loadTime}秒",
"视频时长:": "{duration}秒",
"视频尺寸:": "{videoWidth}x{videoHeight}",
"视频音量:": "{volume}%",
"视频FPS:": "{fps}",
"音频解码:": "{audioDecodedByteCount} Byte",
"视频解码:": "{videoDecodedByteCount} Byte"
},
video: url
};
var player = new ckplayer(videoObject)
</script>
</head>
<body marginwidth="0" marginheight="0">
<div id="playerCnt" class="playerCnt"></div>
</body>
</html>
ckplayer.js 内容
MacPlayer.Html = '<iframe border="0" src="'+maccms.path+'/static/player/ckplayer.html" width="100%" height="100%" marginWidth="0" frameSpacing="0" marginHeight="0" frameBorder="0" scrolling="no" vspale="0" noResize></iframe>';
MacPlayer.Show();
到后台设置
添加播放器,第一页设置
添加一个播放器,编码是采集的视频里指定的编码
第二页设置
其实就是ckplayer.js
的内容
现在去前台应该就可以了。