草莓播放器 · CKPlayer：兼容性强者

本篇介绍草莓播放器中的 CKPlayer 方案。CKPlayer 是国内长期维护的自适应播放器，兼容性极强。

原出处

CKPlayer（ckplayer）是一款国产开源的自适应网页播放器，长期更新、对老版本浏览器较为友好。本项目在 CKPlayer 官方资源（ckplayer.js 及配套的 flv.js/hls.js/mpegts.js、css、language）基础上做整体本地化到 ck/ckplayer/ 目录。

项目：CKPlayer（ckplayer）—— 国产自适应网页播放器，官方站点与文档可通过 ckplayer.com 查阅，包内附带其 flv.js/hls.js/mpegts.js 依赖
内置漂流：flv.js、hls.js、mpegts.js（均已本地化）

修改说明

参数入口：读取 ?url=，缺省时使用站内 /video/index.m3u8 兜底。
格式识别：.m3u8 → hls.js；.flv → flv.js；.mp4/.webm/.ogv → native；其它给出「仅支持」提示。
缓冲与容错配置：
- hls：maxBufferLength/maxBufferSize/maxBufferHole 等精细调优
- flv：enableStashBuffer/lazyLoad/autoCleanupSourceBuffer 等流式参数
- 通用：bufferTime/cache/errorTime/timeout 缓冲与超时
自动重试：listener 拦截 error，最多重试 3 次，每次 newVideo(url) 重新加载；ended 打日志。
加载保护：加载动画 + 3 秒备用方案强制隐藏加载态，避免卡死；全局 playerError 兜底重试。

实现效果

兼容 HLS、FLV、MP4、WebM、OGV，及 TS（mpegts）
自动重试（最多 3 次）+ 加载超时保护
加载动画、错误提示、支持主题皮肤
中英文等多语言资源可选

演示说明

🎬 在线演示（下方为该播放器内嵌实时播放，可点击右下角全屏）：

https://play.123366.xyz/ck/?url=视频地址

CKPlayer 对格式兼容和异常恢复最为稳健，适合来源不稳定、需要自动重试的播放场景。

部署教程

以下为官方标准部署方式，可参考 CKPlayer 官方网站：http://www.ckplayer.com/（文档站 ckplayer.com）。官网有时不稳定，若访问失败，请稍后再试或到官方站点下载 release 包。

一、下载部署包

CKPlayer 采用「整套下载」的方式引入：需将完整的 ckplayer 文件夹（内含 ckplayer.js 核心、ckplayer.css 样式、language 语言目录，以及附带的 flv.js / hls.js / mpegts.js 依赖和官方示例）一并部署到站点。

请通过 CKPlayer 官网提供的压缩包下载 release 包。具体下载入口请以 http://www.ckplayer.com/ 官网当前页面为准，本站不在此编造具体下载链接。

二、上传部署

将下载解压得到的 ckplayer 文件夹整体上传到站点根目录（或任意可被浏览器直接访问的目录），例如上传至站点根目录后路径为：/ckplayer/。

三、创建容器与引入资源

在 HTML 页面中加入容器节点，并在 </body> 前引入核心 JS 与 CSS：

1
2
3
4
5
6
<!-- 播放器容器 -->
<div id="video"></div>

<!-- 引入 ckplayer 核心 JS 与样式 -->
<script src="ckplayer/js/ckplayer.js"></script>
<link rel="stylesheet" href="ckplayer/css/ckplayer.css" />

四、使用 videoObject 初始化

CKPlayer 官方推荐使用 videoObject 方式初始化，通过 new ckplayer(videoObject) 创建播放器实例：

1
2
3
4
5
6
7
8
9
<script>
    var videoObject = {
        container: '#video',   // 容器 id
        variable: 'player',    // 全局变量名
        video: 'demo.mp4'      // 视频地址
        // config: { /* 可选配置 */ }
    };
    var player = new ckplayer(videoObject);
</script>

其中：

container：存放播放器的容器选择器，对应页面中的 <div id="video"></div>；
variable：创建后的全局变量名；
video：要播放的视频地址，支持 mp4 / m3u8 / flv 等；
config：可选，用于填充播放器配置项。

五、最小示例（?url= 传参播放）

如需通过 URL 传参播放，可读取 ?url= 参数作为视频地址，实现一个最小可播放页面：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div id="video"></div>
<script src="ckplayer/js/ckplayer.js"></script>
<link rel="stylesheet" href="ckplayer/css/ckplayer.css" />
<script>
    // 读取 URL 中的 ?url= 参数作为视频地址
    var url = new URLSearchParams(location.search).get('url')
              || 'demo.mp4';
    var videoObject = {
        container: '#video',
        variable: 'player',
        video: url
    };
    var player = new ckplayer(videoObject);
</script>

七、下载文件、部署到自己网站

上面的资源引入用于快速体验；若要把 CKPlayer 从官网下载 release 包并在自己的网站部署：

需要下载哪些文件：播放 MP4 只需核心 ckplayer.js，但官网的 release 是一个目录包（含 js、css、language 及 m3u8/hls 所需依赖），需要整包下载、整目录上传，仅上传单个 js 无法正常加载字幕/语言与流媒体能力。
- 官方下载：请访问 CKPlayer 官方网站（ckplayer.com）获取最新 release 包；npm 同名包 ckplayer 亦可从 CDN 镜像获取：https://cdn.jsdelivr.net/npm/ckplayer@3.1.2/…（解压后取 js/ckplayer.js 及配套目录）。
放到网站目录：在站点根目录新建 ck/ 文件夹，把 release 包解压后的 js、css、language 等整目录结构放进去。

本地引用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script src="./ck/js/ckplayer.js"></script>
<div id="player"></div>
<script>
var videoObject = {
  container: '#player',
  variable: 'player',
  video: new URLSearchParams(location.search).get('url'),
};
var player = new ckplayer(videoObject);
</script>

用 ?url= 播放：整站上传到任意静态托管（Nginx、Apache、EdgeOne Pages 等），无需后端：
```
https://你的域名/ck/?url=视频地址
```

注意：CKPlayer 依赖较多、目录结构较重，若不需要字幕/多语言/秒开等增强能力，直接使用本页上方的 CDN 快速方案最简单；若需自托管，务必整目录上传并保持相对路径不变。仍建议查阅 ckplayer.com 官方文档核对最新 release 的目录结构。