王阳
159603341e
- src/ 下拆分为入口/语言包/默认配置/主函数/工具模块,主函数整体搬入零改动 - rollup 打包 UMD(moeplayer.js + moeplayer.min.js),用户使用方式不变 - 库拷贝逻辑移至 scripts/copy-libs.js - README 重写:中文文档、快速开始、路线图、致谢原作者 - index.html 增加皮肤切换演示(默认/红色/西瓜)
73 lines
2.8 KiB
Markdown
73 lines
2.8 KiB
Markdown
# MoePlayer
|
||
|
||
一款中文友好的开源网页视频播放器（MIT 协议），fork 自已停止维护的 [ckplayer](http://www.ckplayer.com) 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`：
|
||
|
||
```html
|
||
<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 之前引入）：
|
||
|
||
```html
|
||
<script type="text/javascript" src="moeplayer/language/en.js" charset="UTF-8"></script>
|
||
```
|
||
|
||
### 皮肤
|
||
|
||
默认皮肤 `moeplayer.css`，另有红色 `moeplayer.red.css`、西瓜风格 `moeplayer.ixigua.css`，替换 CSS 文件即可换肤。
|
||
|
||
## 从源码构建
|
||
|
||
```bash
|
||
npm install
|
||
npm run build
|
||
```
|
||
|
||
源码在 `src/`（ES Module），构建产物输出到 `moeplayer/js/`（UMD，含未压缩版与 min 版），同时从 npm 依赖拷贝 hls.js / flv.js / mpegts.js 运行时库到 `moeplayer/` 对应目录。
|
||
|
||
## 改造路线图
|
||
|
||
- [x] 工程化：npm + rollup 构建，依赖 npm 化管理
|
||
- [x] 改名 ckplayer → MoePlayer，单文件拆分为 ES Module
|
||
- [ ] 核心与 UI 分层，皮肤改用 CSS 变量 + SVG 图标
|
||
- [ ] 协议插件化（hls/mpegts 按需加载，移除已停维护的 flv.js）
|
||
- [ ] 移动端 H5 兼容性专项
|
||
- [ ] Moodle media 插件（独立仓库 moodle-media_moeplayer）
|
||
- [ ] 完整中文文档
|
||
|
||
## 致谢
|
||
|
||
感谢 ckplayer 原作者 [niandeng](http://www.ckplayer.com) 的开源工作，本项目在其 X3 版本基础上继续演进。
|
||
|
||
## 协议
|
||
|
||
[MIT](LICENSE) © MoePlayer 项目 & ckplayer 原作者 niandeng
|