ckplayer学习记录

昊虹AI笔记

于 2024-12-20 09:57:08 发布

阅读量1k

点赞数 23

CC 4.0 BY-SA版权

文章标签：播放器 ckplayer

本文链接：https://blog.youkuaiyun.com/wenhao_ir/article/details/135048691

视频项目专栏收录该内容

6 篇文章

订阅专栏

01-官方网站

https://www.ckplayer.com/

码云：https://gitee.com/niandeng/ckplayer

02-源码下载

https://www.ckplayer.com/down/
码云页地址：https://gitee.com/niandeng/ckplayer
我用的源三版本：X3-2022.02.08
X3-2022.02.08 百度网盘下载地址：
https://pan.baidu.com/s/1sQkkqIU-R7n–JhBSMEHSw?pwd=62ok
实际使用时只需要上传上面这个压缩包解压出来的名叫ckplayer的文件夹，里面就包含了所有的在实际使用时需要包含的文件。
在这里插入图片描述

03-官方文档及第三方可参考文档

示例：https://www.ckplayer.com/manual/13.html#m45.html
手册：https://www.ckplayer.com/manual/
第三方可参考文档：
https://www.cnblogs.com/bigbox777/p/13825585.html
下面这个挺好的，写了不少实用的操作，比如前置广告如何随机播放，如何连续播放两个前置广告等。
https://blog.youkuaiyun.com/wangzxcv1/article/details/78103176/

04-我阅读功能列表时的记录(感兴趣的功能)

在这里插入图片描述

04-1-自定义功能里感兴趣的内容

自定义logo
记忆播放
切换出播放页暂停播放
自定义右键
任意向播放器内添加内容？

04-2-程序控制里感兴趣的内容

显示/隐藏控制栏

04-3-广告功能里感兴趣的内容

贴片广告
暂停广告

05-我要实现的目标

PC端和移动端测试无误
去掉多余的按钮（清晰度切换去掉、字幕切换去掉）
去掉右上角的logo
广告功能的实现
把所有的功能都浏览一遍，并搞懂是做什么的
右键的ckplayer的文字和链接都换掉
宽度占据屏蔽的五分之3，即占据container 的百分之六十
控制栏不自动消失

06-测试视频地址

https://videogroup001.hyai.info/videogroup001/001/000001.mp4

07-标准调用代码

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
        <script type="text/javascript" charset="utf-8" src="ckplayer/js/ckplayer.js"></script>
    </head>
    <body>
        <div class="video" style="width: 600px;height: 400px;"></div>
        <script type="text/javascript">
            //定义一个变量：videoObject，用来做为视频初始化配置
            var videoObject = {
        	container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
        	video: 'temp.mp4'//视频地址
            };
            new ckplayer(videoObject);//初始化播放器
        </script>
    </body>
</html>

08-关于移动端缓冲时的图标问题

实测，这与每个浏览器有关，比如在华为自带的浏览器中，就直接变成了一个播放按钮，没有什么过多提示。
而QQ浏览器则有缓存中的圆圈转圈提示，并且还有当前速度的提示。
UC浏览器的话不仅要显示圆圈转圈提示，还要显示加载到百分之多少了。

09-怎么样把PC端右上角的“ckplayer”的图标去掉

官方文档提供了修改的方法，链接如下：
https://www.ckplayer.com/manual/13.html#m46

有两种方案，一是改源码，一是改图标，我个人倾向于目前的话改源码，改图标的话我在调试阶段是很不方便的。
参考以下网页：
https://blog.youkuaiyun.com/wangzxcv1/article/details/78103176/
https://blog.youkuaiyun.com/supercrsky/article/details/81356177
https://blog.youkuaiyun.com/litCabbage/article/details/103152676
https://blog.youkuaiyun.com/u014100552/article/details/79972893

10-初始化配置里的属性说明

<script type="text/javascript">
    var videoObject = {
    container: '',//视频容器的ID
	volume: 0.8,//默认音量，范围0-1
	poster: '',//封面图片地址
	autoplay: false,//是否自动播放
	loop: false,//是否需要循环播放
	rotate:0,//视频旋转角度
	zoom:0,//默认缩放比例
	live: false,//是否是直播
	ad:null,//广告
	backLive:false,//显示返回直播按钮
	seek: 0,//默认需要跳转的秒数
	next: null,//下一集按钮动作
	loaded: '',//加载播放器后调用的函数
	plug:'',//使用插件，目前支持hls.js:用于在pc端播放m3u8，flv.js:播放flv，mpegts.js：播放ts
	duration:0,//如果强制使用点播，而视频里不存在总时间，可以手动指定
	preview: null,//预览图片对象
	prompt: null,//提示点功能
	crossOrigin:'',//发送跨域信息，示例：Anonymous
	video: null,//视频地址
	type:'',//视频类型
	playbackrate: 1,//默认倍速
	ended:null,//结束显示的内容
	webFull:false,//是否启用页面全屏按钮，默认不启用
	theatre:null,//是否启用剧场模式按钮，默认不启用
	controls:false,//是否显示浏览器自带的控制栏
	rightBar:null,//是否开启右边控制栏
	smallWindows:null,//是否启用小窗口模式
	smallWindowsDrag:true,//小窗口开启时是否可以拖动
	screenshot:false,//截图功能是否开启
	timeScheduleAdjust:1,//是否可调节播放进度,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动
	logo:'',//logo
	menu:null,//右键菜单
	information:{//关于
		'Load:':'{loadTime} second',
		'Duration:':'{duration} second',
		'Size:':'{videoWidth}x{videoHeight}',
		'Volume:':'{volume}%',
		'Sudio decoded:':'{audioDecodedByteCount} Byte',
		'Video decoded:':'{videoDecodedByteCount} Byte'
	},
	track:null,//字幕
	title:'',//视频标题
	language:'',//语言包文件
	barHideTime:1500,//控制栏隐藏时间
	playbackrateOpen:true,//是否开启控制栏倍速选项
	playbackrateList:[0.75,1,1.25,1.5,2,4],//倍速配置值
	cookie:null,//cookie名称，在同一域中请保持唯一
	domain:null,//cookie保存域
	cookiePath:'/',//cookie保存路径
	documentFocusPause:false,//窗口失去焦点后暂停播放
	mouseWheelVolume:2,//是否启用鼠标滚轮调节音量功能，0=不启用，1=启用，2=全屏时才启用
	keyVolume:2//是否启用键盘控制音量调节，0=不启用，1=启用，2=全屏时才启用
    };
    </script>

遍历之后的心得感受：上面这些里面的初始化配置经实测几乎都没有用，不知道是我哪里搞错了~
后来找到原因了，因为我看的是X2的手册，但我用的源码是X3的。

10-01-初始化属性ended:null该怎么用？

问：ckplayer的初始化属性ended:null该怎么用？
这个属性用于设置播放完成后显示的内容，代码如下：

        // 定义一个变量：videoObject，用来做为视频初始化配置
        var videoObject = {
            container: '#video01', //“#”代表容器的ID，“.”或“”代表容器的class
            video: videoUrl01,
            ended:'I love wang hong', //播放完成后显示的内容
        };

在这里插入图片描述

10-02-初始化属性：controls:false

controls:false,//是否显示自带控制栏

这句配置语句的意思是是否显示ckplayer自带的控制栏，当设为false，表示不使用ckplayer自带的控制栏，即使用自己定义的控制栏，但是如果自己没有定义，还是会显示ckplayer自带的控制栏，所以当自己没有定义时，是无需对这个选项进行配置的。

10-03-初始化属性：smallWindows:null

在 CKPlayer 中，smallWindows 是一个初始化属性，用于控制是否启用小窗口模式。小窗口模式通常用于在页面中创建一个较小的视频播放窗口，以便用户可以同时浏览其他内容。

当你将 smallWindows 设置为 null 时，CKPlayer 将默认启用小窗口模式。这意味着用户可以通过点击播放器来打开一个小窗口，从而实现在较小的窗口中播放视频。

以下是一个简单的示例，演示了如何初始化 CKPlayer 并将 smallWindows 设置为 null：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CKPlayer Example</title>
    <!-- 引入 CKPlayer 的相关文件 -->
    <script src="path/to/ckplayer.js"></script>
</head>
<body>
    <div id="video-container"></div>

    <script>
        // 初始化 CKPlayer
        var videoElement = document.getElementById('video-container');
        var player = new CKobject({
            container: videoElement,
            variable: 'player',
            video: 'path/to/your/video.mp4',
            // 将 smallWindows 设置为 null
            smallWindows: null,
        });

        // 其他初始化配置...
        
        // 启动播放器
        player.embed('path/to/ckplayer.swf', 'ckplayer-container', '100%', '100%');
    </script>
</body>
</html>

在这个示例中，smallWindows 被设置为 null，因此 CKPlayer 将默认启用小窗口模式。用户可以通过交互行为打开小窗口，以便在较小的窗口中观看视频。请注意，具体的小窗口模式的交互和样式可能需要根据你的项目需求进行定制。

如果你想禁用 CKPlayer 的小窗口模式，你可以将 smallWindows 属性设置为 false。这将阻止用户通过交互行为打开小窗口，使视频只在当前的播放器窗口中播放。

然而经过我实测，将 smallWindows 属性设置为 false没用，还是可以小窗播放。原因是这其实是由浏览器搞的鬼，现在的浏览器太强大了。我试了下同行的，也都因为浏览器的强大而都可以小窗播放

10-04-初始化属性：logo:‘’

在 CKPlayer 中，logo 是用于设置视频播放器上方的 Logo 图片的初始化属性。通过设置 logo 属性，你可以指定一个 Logo 图片的 URL 地址，从而在播放器界面中显示该 Logo。

以下是一个简单的示例，演示了如何初始化 CKPlayer 并设置 logo 属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CKPlayer Example</title>
    <!-- 引入 CKPlayer 的相关文件 -->
    <script src="path/to/ckplayer.js"></script>
</head>
<body>
    <div id="video-container"></div>

    <script>
        // 初始化 CKPlayer
        var videoElement = document.getElementById('video-container');
        var player = new CKobject({
            container: videoElement,
            variable: 'player',
            video: 'path/to/your/video.mp4',
            // 设置 Logo 图片的 URL 地址
            logo: 'path/to/your/logo.png',
        });

        // 其他初始化配置...
        
        // 启动播放器
        player.embed('path/to/ckplayer.swf', 'ckplayer-container', '100%', '100%');
    </script>
</body>
</html>

在这个示例中，logo 属性被设置为 Logo 图片的 URL 地址。播放器将在界面上方显示该 Logo。你需要将 'path/to/your/logo.png' 替换为你实际 Logo 图片的文件路径。

但是很不幸的是，我用下面的代码，实测无效：

        // 定义一个变量：videoObject，用来做为视频初始化配置
        var videoObject = {
            container: '#video01', //“#”代表容器的ID，“.”或“”代表容器的class
            video: videoUrl01,
            logo: 'https://mmpic1.hyai.info/static/01.png',
        };

10-05-初始化属性：menu:null

在 CKPlayer 中，menu 是用于设置右键菜单的初始化属性。你可以通过设置 menu 属性来定义视频播放器右键菜单的内容和行为。

下面是一个简单的示例，演示了如何初始化 CKPlayer 并设置 menu 属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CKPlayer Example</title>
    <!-- 引入 CKPlayer 的相关文件 -->
    <script src="path/to/ckplayer.js"></script>
</head>
<body>
    <div id="video-container"></div>

    <script>
        // 初始化 CKPlayer
        var videoElement = document.getElementById('video-container');
        var player = new CKobject({
            container: videoElement,
            variable: 'player',
            video: 'path/to/your/video.mp4',
            // 设置右键菜单
            menu: [
                {
                    name: '播放/暂停',
                    click: function() {
                        // 自定义播放/暂停行为
                        if (player.getStatus().paused) {
                            player.videoPlay();
                        } else {
                            player.videoPause();
                        }
                    }
                },
                {
                    name: '全屏',
                    click: function() {
                        // 自定义全屏行为
                        player.fullScreen();
                    }
                },
                // 其他菜单项...
            ],
        });

        // 其他初始化配置...
        
        // 启动播放器
        player.embed('path/to/ckplayer.swf', 'ckplayer-container', '100%', '100%');
    </script>
</body>
</html>