ZLMediaKit 前端播放器怎么选？xgplayer / DPlayer / ckplayer / ZWPlayer 横向对比

自建流媒体链路的团队，服务端选型往往很早就定了 ZLMediaKit——C++ 写的工业级流媒体框架，协议支持全，稳定性经过大量商用验证。但到了前端，"播放器用什么"这个问题经常是被随手处理的：从收藏夹里抓一个以前用过的播放器，接上地址就开始跑。

于是常见的翻车现场是：WebRTC 流播不了、直播断了没人重连、监控画面延迟十几秒、想加个字幕功能发现要自己造一堆轮子。服务端能力满分，前端消费不动，整条链路还是瘸的。

这篇文章就把这件事一次说清楚：先看 ZLMediaKit 到底能输出什么，再看浏览器端的真实约束，然后把 xgplayer（西瓜播放器）、DPlayer、ckplayer、ZWPlayer 四款国产播放器放到同一张表里对比，最后给出分场景的选型结论。不吹不黑，以能落地的技术事实为准。

一、先看清考题：ZLMediaKit 能输出什么

简单介绍一下这位"考官"。

ZLMediaKit 是一套 C++11 实现的 high-performance 流媒体服务框架，跨平台部署，核心设计是协议与媒体处理解耦：输入一路流，输出侧可以同时以多种协议对外服务。它支持的主流协议包括：

• RTSP / RTMP 推拉流
• HLS（含切片与点播）
• HTTP-FLV / WebSocket-FLV / HTTP-TS
• WebRTC（推流 WHIP、拉流 WHEP 均已支持标准化信令）
• SRT、GB28181、RTP（安防与国标场景的常客）

除了协议转换，它还带一套完整的运营能力：按需拉流代理（addStreamProxy）、无人观看自动断流、MP4/HLS 录制、RESTful API、Hook 事件回调（鉴权、按需生成、录制通知等）。这也是它在安防监控、企业直播、在线教育这几类场景里装机量很大的原因。

关键在下面这张表。假设有一路流 live/test，ZLMediaKit 对外提供的是一整个地址族（具体端口路径取决于部署配置）：

协议	播放地址示例	典型延迟
RTMP	rtmp://host/live/test	1~3 秒
RTSP	rtsp://host/live/test	1~3 秒
HTTP-FLV	http://host/live/test.live.flv	1~3 秒
WebSocket-FLV	ws://host/live/test.live.flv	1~3 秒
HLS	http://host/live/test/hls.m3u8	5 秒以上
WebRTC（WHEP）	https://host/index/api/whep?app=live&stream=test	亚秒级

这张表就是前端播放器的考卷。播放器选型的第一问：这张表里你能消费几行？

二、真正的考点在浏览器端

服务端协议全，不等于浏览器能播。Web 端有几条硬约束，直接决定了选型标准：

1. RTSP 和 RTMP，浏览器没有原生支持。
这不是播放器写得好不好的问题，是浏览器根本不提供这两个协议的栈。所以 RTSP 摄像头接入 Web，标准做法就是让 ZLMediaKit 这类服务器做协议转换（这恰恰是它的强项），前端去消费转换后的 WebRTC / FLV / HLS。前端播放器需要具备的是消费转换结果的能力，而不是硬啃 RTSP。

2. HTTP-FLV / WS-FLV 需要 MSE 引擎。
FLV 不是浏览器原生格式，播放器必须内置 flv.js 或 mpegts.js 这类解码封装引擎，并处理好按需加载与直播场景的缓冲策略。

3. HLS 通用，但延迟高。
延迟 5 秒起步，做监控或者互动直播不可接受；低延迟场景必须上 WebRTC。

4. WebRTC 延迟最好，但门槛在信令。
WebRTC 播放需要播放器内置信令客户端——现在主流服务器（含 ZLMediaKit）都支持标准化的 WHEP（WebRTC-HTTP Egress Protocol），播放器只要实现一个标准的 HTTP + SDP 交换客户端就能拉流。问题在于：绝大多数通用 Web 播放器根本没有做这件事。

5. 直播场景的健壮性是隐性考点。
断网重连、卡顿追帧（落后后加速追上而不是一直卡着）、Live 标识这些细节，点播播放器通常不会自带。

把这五条约束翻译成选型清单，就是五个维度：协议消费能力、直播健壮性、点播体验功能、集成成本、授权与维护。下面按这个清单逐个看候选者。

三、四位候选者画像

xgplayer（西瓜播放器）

字节跳动开源，MIT 协议，TypeScript 编写，插件化架构。MP4 原生播放，HLS / FLV / DASH 通过官方插件（xgplayer-hls / xgplayer-flv / xgplayer-dash）接入，弹幕、进度条缩略图预览、记忆播放等视频网站向的功能齐全，社区生态和文档成熟度是四家里最好的。

边界：没有内置 WebRTC 拉流能力，接 ZLMediaKit 的 WebRTC 流需要自己写信令客户端；直播断流重连、追帧这类直播健壮性也需要自行补齐。它更像一个优秀的点播站播放器。

DPlayer

DIYgod 的个人开源项目，MIT 协议，以"轻量 + 好看 + 自带弹幕"著称。FLV / HLS / DASH 分别借助 flv.js / hls.js / dash.js 接入，API 简洁，半天就能在页面里跑起来，是很多个人站和小型项目的心头好。

边界：同样没有 WebRTC 能力；直播断流需要自己监听 error 事件做重连；外挂字幕支持单轨切换，双语、搜索这类需求没有现成方案；个人项目，更新节奏较缓，深度定制前要有心理准备。

ckplayer

国产老牌播放器，免费使用（授权条款以官网为准），配置驱动、功能开关丰富，m3u8 / mp4 / flv 都能播，带缩略图、弹幕、一定的防盗防录屏手段，在传统企业网站里存量很大。

边界：闭源 JS 分发，代码风格自成体系，深度二开不如开源项目顺手；没有 WebRTC 能力，DASH 也未见支持；直播健壮性同样需要自行处理。

ZWPlayer

国产自研播放器，免费商用（注意：非开源分发，介意源码可控的团队需自行评估），当前版本 v3.3.2。它和前三位最大的差异在出身：它的协议栈是照着流媒体服务器的输出矩阵设计的，而不是照着"视频网站点播"设计的。

对着第二节那张考卷看它：WebRTC 内置标准 WHEP 客户端（同时兼容 SRS 信令与阿里 ARTC / 腾讯 TRTC / 百度 BRTC 私有协议）；HTTP-FLV / WS-FLV / TS 走 mpegts.js + flv.js 双引擎（FLV 支持 H.265）；HLS / DASH 齐备。直播侧 isLive 直播模式、reconnect 自动重连、直播追帧（落后时约 1.1 倍速静默追赶，落后过多直接跳到直播边缘）都是出厂自带。

点播侧它的差异化最明显：SRT / WebVTT / TTML 外挂字幕、双语字幕并行渲染、字幕全文搜索（搜关键词定位时间戳，v3.3.2 起支持播放列表内跨视频搜索）、WebVTT / JSON 章节导航 + 章节搜索面板、进度条缩略图雪碧图、动态防录屏水印、多音轨、倍速、画中画等。配套还有一整套可视化工具（章节编辑器、字幕编辑器、缩略图生成器等）。

顺带一提公平性：监控与低延迟赛道还有 Jessibuca 系播放器（开源版主打 WS-FLV，WebRTC 能力集中在商业版 Jessibuca Pro），也是 ZLMediaKit 生态的常见搭配，本文聚焦免费可用的通用播放器，不展开。

四、横向对比表

维度	xgplayer	DPlayer	ckplayer	ZWPlayer
背景 / 授权	字节开源 / MIT	个人开源 / MIT	国产老牌 / 免费（见官网条款）	国产自研 / 免费商用
MP4 / WebM 点播	✅	✅	✅	✅
HLS	✅ 插件	✅ hls.js	✅	✅
HTTP-FLV / WS-FLV	✅ 插件	✅ flv.js	✅	✅ 双引擎（含 H.265）
DASH	✅ 插件	✅ dash.js	—	✅
WebRTC（WHEP）	❌	❌	❌	✅（另兼容 ARTC/TRTC/BRTC）
直播断线重连	自行实现	自行实现	自行实现	✅ 出厂自带
直播追帧	❌	❌	❌	✅
外挂字幕（SRT/VTT）	✅	✅ 单轨	✅	✅（含 TTML）
双语字幕	❌	❌	❌	✅
字幕全文搜索	❌	❌	❌	✅（含跨视频）
章节导航 / 章节搜索	❌	❌	❌	✅
进度条缩略图预览	✅	❌	✅	✅ 雪碧图
弹幕	✅	✅	✅	✅
防录屏水印	❌	❌	部分	✅ 动态水印
框架封装	社区封装	社区封装	配置式	Vue2 / Vue3 / React 官方包，WordPress 插件
TypeScript 类型	✅	✅	❌	❌（暂无官方 d.ts）
文档 / 社区成熟度	高	中	中	起步阶段

两点说明，免得表格显得偏心：

• xgplayer 和 DPlayer 的"❌"多集中在流媒体直播侧，这是产品定位使然——它们本来就不是为流媒体服务器设计的，做点播站依然优秀；
• ZWPlayer 的短板也如实列了：非开源分发、暂无官方 TypeScript 类型声明、社区规模远不及前两位。是否可接受，取决于团队的评估标准。

五、对接 ZLMediaKit：实测代码

以下示例基于 ZWPlayer（协议覆盖全，示例最有代表性），环境假设：ZLMediaKit 已部署在 zlm.example.com，先用 FFmpeg 推一路测试流：

ffmpeg -re -i input.mp4 -c copy -f flv rtmp://zlm.example.com/live/test

WebRTC（WHEP）：十行以内

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
  <div id="player"></div>
  <script src="https://cdn.zwplayer.com/v3/zwplayer/zwplayer.js"></script>
  <script>
    new ZWPlayer({
      playerElm: 'player',
      width: 640,
      height: 360,
      url: 'https://zlm.example.com/index/api/whep?app=live&stream=test',
      isLive: true,
      reconnect: true,
      autoplay: true
    });
  </script>
</body>
</html>

ZWPlayer 检测到地址里的 /whep 路径会自动走标准 WHEP 客户端：POST SDP offer、接收 answer、按响应 Location 头管理会话资源（播放结束发 DELETE 释放）。这一段是标准协议行为，所以对接 SRS、mediamtx 等其他支持 WHEP 的服务器时代码零改动。

一条流，多协议降级

WebRTC 被某些网络环境（严格 NAT、UDP 封锁）掐断时，同一个页面只需要换 URL 就能降级到 FLV 或 HLS，播放器初始化代码不变：

// WS-FLV：延迟 1~3 秒，兼容性好于 WebRTC
url: 'ws://zlm.example.com/live/test.live.flv'

// HLS：延迟最高，但 CDN 分发扩展性最好
url: 'https://zlm.example.com/live/test/hls.m3u8'

配合 reconnect 重连与自动追帧，弱网直播的观感有基本保障。

RTSP 摄像头：前端根本不用碰 RTSP

安防场景的典型链路是摄像头输出 RTSP。做法是让 ZLMediaKit 做拉流代理：

curl "http://zlm.example.com/index/api/addStreamProxy?secret=你的secret&vhost=__defaultVhost__&app=live&stream=cam01&url=rtsp://摄像头IP:554/Streaming/Channels/101"

之后前端照常播 whep?app=live&stream=cam01 或对应的 FLV 地址——RTSP 的存在被服务器消化掉了，浏览器端永远只面对 Web 友好的协议。这也回答了"ZWPlayer 支不支持 RTSP"这个问题：浏览器内没有原生 RTSP 栈，正确的工程解法就是协议转换，而它把转换后的全部结果都覆盖了。

点播场景：字幕搜索与章节导航

ZLMediaKit 既是直播服务器也带 HTTP 文件服务（MP4 点播）与 HLS 切片能力。点播侧接上 ZWPlayer 的内容功能：

new ZWPlayer({
  playerElm: 'player',
  url: 'https://zlm.example.com/vod/course-01.mp4',
  subtitle: ['course-01.zh.srt', 'course-01.en.vtt'],  // 双语字幕
  chapter: 'course-01.chapters.vtt',                    // WebVTT 章节
  thumbnails: 'course-01.thumbnail.json',               // 雪碧图预览
  autoplay: true
});

课程、发布会回放、庭审记录这类内容，"在字幕里搜关键词直接跳时间点"和"按章节快速定位"是实打实的检索效率提升，而不是锦上添花。

六、按场景给结论

选型没有万能解，按场景说：

• 纯点播站，HLS / MP4 为主，要弹幕：DPlayer 够用且轻，xgplayer 组件化程度更高、定制空间更大。这两家生态成熟、MIT 协议省心，闭眼选问题不大。
• 字节系技术栈、深度定制播放器 UI：xgplayer 的插件体系就是为此准备的。
• 传统企业官网嵌视频、配置式接入、有基础防盗需求：ckplayer 的存量用户可以继续用，新项目建议评估后再定。
• ZLMediaKit 全协议输出都要消费，尤其需要 WebRTC 低延迟：这是分水岭。免费方案里带标准 WHEP 客户端的通用播放器很少，ZWPlayer 是免费可商用的选项；如果接受商业授权，Jessibuca Pro 也在候选池。
• 直播与点播混合、内容平台型需求（字幕搜索、章节、缩略图、双语、防录屏水印）：ZWPlayer 的功能密度优势明显，一套播放器同时覆盖两类场景，不用点播直播各养一套。

一句话版本：如果只做点播，xgplayer / DPlayer 依然是稳妥默认项；一旦业务长出"低延迟直播 + 监控接入 + 内容检索"中的任何一项，播放器的协议栈就必须重新审视——这时候 ZWPlayer 与 ZLMediaKit 的组合值得进候选池。

七、写在最后

回到开头的判断：ZLMediaKit 负责"什么协议都能收、什么协议都能发"，前端播放器负责"发出来的每一种浏览器都能优雅地播"。这两端在协议矩阵上严丝合缝地对齐，才叫适配——这也是本文把协议覆盖放在第一位、功能特性放在第二位的原因。

ZWPlayer 与 ZLMediaKit 的组合恰好构成了这样一个闭环：WebRTC（WHEP）、WS-FLV、HTTP-FLV、HLS、DASH 一一对上，直播重连追帧出厂自带，点播侧的字幕搜索、章节搜索、雪碧图预览补上了流媒体场景里少有人做的内容检索能力。同时它也不是万能药——非开源分发、暂无 TypeScript 类型、社区尚小，这三点是否构成阻塞项，需要结合团队自身情况判断。

选型这件事，说到底是把你自己的协议矩阵和功能清单摊开，和候选者逐项对齐。希望这张考卷和这张对比表，能帮你少走一轮弯路。

---

参考链接

• ZLMediaKit 仓库：https://github.com/ZLMediaKit/ZLMediaKit
• ZLMediaKit 文档：https://docs.zlmediakit.com
• xgplayer：https://github.com/bytedance/xgplayer
• DPlayer：https://github.com/DIYgod/DPlayer
• ckplayer：https://www.ckplayer.com
• ZWPlayer 官网：https://www.zwplayer.com
• ZWPlayer 帮助文档中心（下载安装 / 参数配置 / 播放 RTSP 流等）：https://www.zwplayer.com/zh/docs/support/
• ZWPlayer 发布仓库（Releases 历史版本）：https://github.com/chenfanyu/zwplayer-release/releases
• WHEP 规范（IETF）：https://www.ietf.org/archive/id/draft-ietf-wish-whep-07.html