---

• 💂 个人网站: IT知识小屋
• 🤟 版权: 本文由【IT学习日记】原创、在CSDN首发、需要转载请联系博主
• 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

---

简介

Ckplayer是开源社区中一款功能十分强大的视频播放软件，兼容mp4,flv,m3u8,ts等主流视频格式的播放，支持点播、直播、直播+回放等多种播放模式。 软件基于JavaScript开发，不依赖其它任何插件，内置提供丰富功能，包括清晰度切换、在线弹幕管理、视频截图管理、大小缩放、旋转、播放器尺寸切换等，且兼容PC+移动端使用。软件基于MIT协议开源，集成简单，仅需几行代码，即可快速实现视频播放功能，系统代码完全开源，用户可轻松进行定制开发。

---

架构

使用环境： ckplayer底层是基于javascript开发，所以支持javascript的网页环境都可以使用。

平台支持： 以下列出支持的主流浏览器。另外，像是360，搜狗，百度，华为等浏览器都是使用的Chromium内核，也就是和chrome同一个内核。

项目结构

├─ index.xml                 // 主要演示页面
├─ ckplayer                  // ckplayer 文件夹，正式使用时只需将该文件夹及其内容放置在网站环境中
│  
│  ├─ js                     // JavaScript 文件夹
│  │   ├─ ckplayer.js        // 主文件，播放页需要引入
│  │   └─ ckplayer.min.js    // 压缩主文件，可替代 ckplayer.js 使用
│  │
│  ├─ css                    // 样式文件夹
│  │   ├─ ckplayer.css       // 默认样式
│  │   └─ ckplayer.red.css   // 红色调样式
│  │
│  ├─ images                 // 界面风格用到的图片文件夹
│  │
│  ├─ language               // 语言包文件夹
│  │   ├─ zh.cn.js           // 中文简体
│  │   ├─ zh.hk.js           // 中文繁体
│  │   └─ en.js              // 英文
│  │
│  ├─ hls.js                 // HLS 插件文件夹
│  ├─ flv.js                 // FLV 插件文件夹
│  ├─ mpegts.js              // MPEG-TS 插件文件夹
│  │
│  ├─ Source File            // 播放器风格源文件
│  │
│  └─ video                  // 演示视频文件夹

---

功能列表

界面功能

• 播放/暂停/重播：支持基础播放控制

• 音量调节：调节音量大小

• 静音/恢复音量：快速静音或恢复

• 全屏/退出全屏：支持全屏观看视频

• 页面全屏/退出页面全屏：扩大播放器区域至整个页面

• 剧场模式/退出剧场模式：提供沉浸式观看体验

• 清晰度切换：多清晰度视频切换

• 字幕切换：支持字幕显示与切换

• 倍速播放切换：调整播放速度

• 截图：视频画面截图

• 小窗口（画中画）：边看边操作其他内容

• 循环播放控制：开启或关闭循环播放

• 下一集：自动切换至下一集视频

• 视频预览：鼠标悬停显示视频缩略图

• 关键点提示：标记视频关键时间点

通用功能

• 自定义 Logo 和风格：适配品牌需求

• 记忆播放：记录上次播放进度

• 播放完跳转到下一个视频：自动连续播放

• 切换播放页暂停播放：页面切换时自动暂停

• 自定义右键菜单：增加用户交互操作

• 自定义统计信息：可接入第三方统计

• 任意卸载播放器：动态移除播放器实例

• 异步加载播放器：按需加载，减少初始化时间

• 任意向播放器内部添加内容：扩展功能模块

• 支持键盘控制音量、播放进度：便捷操作

• 支持鼠标滚轮控制音量：增强交互体验

播放方式

• 点播：点播视频播放

• 直播：实时视频播放

• 直播+回放：支持回放功能的直播

格式支持

• .mp4、.m3u8、.flv、.ts、.mpd、.webm、.ogg

广告功能

• 贴片广告：播放前或播放中插入广告

• 暂停广告：视频暂停时显示广告

程序控制

• 获取视频元数据、播放器高度、视频宽高

• 控制播放/暂停

• 控制静音/恢复音量

• 控制音量调节

• 控制全屏/退出全屏

• 控制页面全屏/退出页面全屏

• 控制剧场模式/退出剧场模式

• 控制清晰度切换

• 控制字幕切换

• 控制倍速播放切换

• 开启/关闭小窗口模式

• 开启/关闭循环模式

• 获取 cookie

• 控制跳转（seek）

• 快进/快退

• 截图

• 显示/隐藏控制栏

程序监听

• 监听元数据、总时间、已播放时间

• 监听播放/暂停、是否静音、音量、清晰度、倍速

• 监听全屏、页面全屏切换

• 监听剧场模式切换

• 监听是否循环播放

• 监听鼠标动作

• 监听“返回直播”点击事件

• 监听截图、旋转、缩放操作

• 监听当前页是否处于焦点

限制进度栏

• 正常启用

• 禁止拖动

• 只能前进

• 只能后退

• 只能前进但能回到首次拖动位置

• 已观看部分随意拖动

视频操作扩展

• 旋转视频

• 缩放视频

• 添加/控制元件

• 添加/控制弹幕

• 显示“返回直播”按钮

---

功能演示

播放器样式

播放效果

弹幕展示

多语言

视频截图

小窗模式

---

快速安装

1、引入ckplayer很简单，因为ckplayer只是几个文件，将ckplayer文件夹放置在网站目录里即可使用，没有安装过程，ckplayer是独立的组件，不需要依赖任何其它js插件。

2、在需要调用播放器的页面使用如下代码即可完成配置安装

<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>

---

开源地址&使用手册

点击下方的【IT学习日记】回复【资源】领取！

如果这篇文章对您有帮助，请一定帮我点个 “关注” 和 “点赞”,这对我非常重要。我将会继续推荐更多优质项目和新闻。

写在最后

1000+优质开源项目更新进度：227/1000。如需更多类型优质项目推荐，请在文章后留言。