王阳
7e5fc46126
- CSS 架构改为 src/css/base.css(结构+35个--moe-变量) + themes/(default/red/ixigua) 构建拼接 - 11 张 PNG 雪碧图全部删除,20+ 图标改为 SVG data-URI + CSS mask,颜色随主题变量 - 修复原 ckplayer 雪碧图 exitfull/next 共用图标 bug - 视觉重做:渐变控制条/细轨道+圆点滑块进度条/圆角弹层/系统字体栈 - 默认皮肤深蓝 accent,ixigua 重做为浅色皮肤;播放器默认不再带品牌水印 - 修复中央播放键三角形不居中问题 - index.html 演示页重做:深色现代设计,移除原项目链接
MoePlayer
一款中文友好的开源网页视频播放器（MIT 协议），fork 自已停止维护的 ckplayer X3，在其基础上持续现代化改造。
本项目处于活跃改造期，API 与 ckplayer X3 基本兼容，但全局变量已更名为
MoePlayer，CSS 类名前缀已更名为moeplayer-*。
特性
- 支持 mp4 / flv / m3u8 / ts 等格式（m3u8/flv/ts 基于 hls.js、flv.js、mpegts.js）
- 支持点播、直播、直播+回放
- 支持 PC 与移动端 H5
- 支持使用 JS 监听播放器各种状态、控制播放器各种操作
- 零框架依赖，引入一个 JS 和一个 CSS 即可使用
- 多实例友好：同一页面可创建多个播放器
快速开始
将 moeplayer 文件夹上传到网站环境中，在页面引入 moeplayer.js 和 moeplayer.css：
<link type="text/css" rel="stylesheet" href="moeplayer/css/moeplayer.css" />
<script type="text/javascript" src="moeplayer/js/moeplayer.min.js" charset="UTF-8"></script>
<div class="video" style="width: 600px;height: 400px;">播放器容器</div>
<script type="text/javascript">
var videoObject = {
container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
video: 'https://example.com/sample.mp4' //视频地址
};
var player = new MoePlayer(videoObject); //初始化播放器
</script>
更多配置与 API 可参考本仓库的 index.html 演示页；原 ckplayer 手册（http://www.ckplayer.com/manual/ ）在改造期内仍有参考价值。
语言
默认中文。引入语言包可切换其它语言（需在引入 moeplayer.js 之前引入）：
<script type="text/javascript" src="moeplayer/language/en.js" charset="UTF-8"></script>
皮肤
默认皮肤 moeplayer.css，另有红色 moeplayer.red.css、西瓜风格 moeplayer.ixigua.css，替换 CSS 文件即可换肤。
从源码构建
npm install
npm run build
源码在 src/（ES Module），构建产物输出到 moeplayer/js/（UMD，含未压缩版与 min 版），同时从 npm 依赖拷贝 hls.js / flv.js / mpegts.js 运行时库到 moeplayer/ 对应目录。
改造路线图
- 工程化：npm + rollup 构建，依赖 npm 化管理
- 改名 ckplayer → MoePlayer，单文件拆分为 ES Module
- 核心与 UI 分层，皮肤改用 CSS 变量 + SVG 图标
- 协议插件化（hls/mpegts 按需加载，移除已停维护的 flv.js）
- 移动端 H5 兼容性专项
- Moodle media 插件（独立仓库 moodle-media_moeplayer）
- 完整中文文档
致谢
感谢 ckplayer 原作者 niandeng 的开源工作，本项目在其 X3 版本基础上继续演进。
协议
MIT © MoePlayer 项目 & ckplayer 原作者 niandeng