maccms 添加 ckplayer播放器

建站 · 10-01 · 202 人浏览

ckplayer支持 m3u8,mp4,ts,flv 等格式,挺好用的。
不得不说,搜索引擎搜到的答案和ai回答的都是错误答案。
添加ckplayer播放器后,采集只需要采集m3u8资源,播放器都用自己的,既稳定,还能省去可能第三方有广告的问题。

从官网下载安装包

链接: https://www.ckplayer.com/

下载后解压,有一个 ckplayer 文件夹,放到自己网站的static/player 里面。

文件夹应该是这样的:

1696092543975.png
1696092553222.png

添加播放器

static/player下面新建两个文件,分别是 ckplayer.htmlckplayer.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();

到后台设置

添加播放器,第一页设置

添加一个播放器,编码是采集的视频里指定的编码

1696092756364.png

第二页设置

其实就是ckplayer.js的内容

1696092814741.png

现在去前台应该就可以了。

1696092873229.png

maccms ckplayer