视频播放器整理

一、 综合性 Web 播放器框架（Player）

定义：自带精美的 UI 控制栏（如播放/暂停按钮、进度条、音量等），封装了底层逻辑，开发者只需几行代码即可在网页上实现视频播放。

• Video.js (video)
  • 核心功能：提供统一的 HTML5 视频播放外壳。
  • 技术特点：高度可扩展的插件生态，支持自定义皮肤和组件。
  • 支持格式：原生支持 MP4、WebM、OGG。通过插件支持 HLS、DASH、FLV 等。
  • 适用场景：需要高度自定义 UI 或兼容多种格式的企业级项目。
• DPlayer (dplaer)
  • 核心功能：轻量级 HTML5 播放器，支持视频切换与状态监听。
  • 技术特点：原生支持弹幕（Danmaku）系统，核心播放器与弹幕引擎解耦，支持截图、热键。
  • 支持格式：MP4、WebM，通过插件支持 HLS、FLV、DASH。
  • 适用场景：视频社区、在线教育、二次元站点等强互动场景。
• XGPlayer (西瓜播放器)
  • 核心功能：高性能视频播放器。
  • 技术特点：“一切皆组件化”，UI 与逻辑彻底解耦；摆脱对原生 <video> 标签的依赖，通过自研内核实现 MP4 流式分段加载。
  • 支持格式：MP4、HLS、FLV 等。
  • 适用场景：短视频、清晰度无缝切换、移动端高兼容性要求场景。
• ZWPlayer (OnlinePlayer)
  • 核心功能：全能网页视频/音频播放工具。
  • 技术特点：智能路由引擎，自动识别视频流协议；内置 WebSocket 代理模式实现 RTSP 无插件播放；数据本地化存储保障隐私。
  • 支持格式：点播（MP4、MKV、MOV、H.265、AV1）；直播流（RTSP、WebRTC、HLS、DASH、HTTP-FLV）。
  • 适用场景：安防监控、企业内网直播、需要双字幕/AB循环/视频录制等进阶功能的场景。
• CKPlayer
  • 核心功能：网页视频播放器。
  • 技术特点：HTML5 和 Flash 双核引擎，支持多段视频无缝连播、前置广告插入。
  • 支持格式：FLV、F4V、MP4、WebM、OGG、M3U8 (HLS)、RTMP。
  • 适用场景：国内常见的视频流格式播放，传统视频网站。
• Plyr
  • 核心功能：轻量级 HTML5 播放器。
  • 技术特点：UI 设计干净优雅，极佳的无障碍访问（Accessibility）支持。
  • 支持格式：HTML5 视频/音频、YouTube、Vimeo。
  • 适用场景：追求极简美学、现代 Web 标准的项目。
• ArtPlayer
  • 核心功能：现代化 HTML5 视频播放器。
  • 技术特点：灵活的插件化架构，UI 与核心逻辑完全解耦。
  • 支持格式：MP4、WebM 等（需配合插件支持流媒体）。
  • 适用场景：需要深度定制 UI 和交互逻辑的项目。
• TinyPlayer
  • 核心功能：极简视频播放器库。
  • 技术特点：极致轻量（gzip 后仅 7KB），零依赖，控制栏可插拔。
  • 支持格式：MP4、WebM、OGG、HLS。
  • 适用场景：对首屏加载性能和包体积有严苛要求的小型项目。
• Chimee
  • 核心功能：H5 播放器框架。
  • 技术特点：主打“插件化”和“组件化”，支持在播放器内部运行自定义的 HTML/CSS/JS 组件。
  • 支持格式：HLS、FLV、MPEG-DASH。
  • 适用场景：视频内嵌弹幕、互动答题等深度定制交互逻辑场景。
• Clappr
  • 核心功能：高度模块化的播放器。
  • 技术特点：UI 和核心逻辑完全分离，拥有极其丰富的第三方插件生态。
  • 支持格式：HLS、DASH、FLV。
  • 适用场景：国际化项目，需要高度模块化架构的场景。
• Fluid Player
  • 核心功能：专为 HTML5 视频设计的轻量级播放器。
  • 技术特点：原生支持 VAST/VPAID 视频广告标准。
  • 支持格式：MP4、WebM 等标准格式。
  • 适用场景：需要在网页视频中插入标准化商业广告的场景。
• MediaElement.js
  • 核心功能：跨浏览器统一播放器。
  • 技术特点：提供统一的 UI 和 API，抹平浏览器之间的差异。
  • 支持格式：HTML5 原生、Flash 及其他插件支持的格式。
  • 适用场景：需要兼容极老浏览器、提供一致播放体验的遗留系统。

---

二、 底层协议解析库（Parser / Engine）

定义：通常没有复杂的 UI，核心作用是将浏览器原生不支持的视频流格式，通过 JavaScript 解析、转封装后，“喂”给 HTML5 <video> 标签播放。

• hls.js
  • 核心功能：播放 HLS (.m3u8) 协议。
  • 技术特点：通过 MSE 技术将 TS 切片异步转封装为 MP4 播放，支持 AES-128 解密和 DRM。
  • 支持格式：MPEG-2 TS、fMP4 容器，H.264/H.265 编码。
  • 适用场景：在 Chrome/Firefox 等不支持原生 HLS 的浏览器上播放 m3u8 流。
• flv.js
  • 核心功能：播放 Flash Video (.flv) 格式。
  • 技术特点：纯 JS 将 HTTP-FLV 流实时转封装为 fMP4 片段，实现无插件低延迟直播。
  • 支持格式：FLV 容器，H.264 视频编码，AAC/MP3 音频。
  • 适用场景：历史遗留 FLV 格式播放，以及秀场/游戏直播的 HTTP-FLV 低延迟流。
• dash.js
  • 核心功能：播放 MPEG-DASH (.mpd) 协议。
  • 技术特点：解析 MPD 文件，内置 ABR（自适应码率）引擎，根据网络状况自动切换清晰度。
  • 支持格式：ISO BMFF (fMP4)、WebM，H.264/H.265/AV1 编码。
  • 适用场景：高质量视频点播（VOD）、大规模商业级直播系统。
• WebTorrent
  • 核心功能：P2P 流媒体客户端。
  • 技术特点：利用 WebRTC 技术在浏览器中实现 BitTorrent 协议，支持边下边播。
  • 支持格式：MP4、MKV、WebM 等浏览器原生可解码的视频格式。
  • 适用场景：去中心化视频分发、大文件流媒体传输、减轻中心服务器带宽压力。

---

三、 流媒体协议标准（Protocol）

定义：不是软件或代码库，而是视频数据在网络中传输的规则和格式标准。

• HLS (HTTP Live Streaming)：Apple 推出的自适应流媒体协议，将视频切成 .ts 片段，通过 .m3u8 索引文件播放。
• DASH (Dynamic Adaptive Streaming over HTTP)：国际标准的自适应流协议，与 HLS 类似但使用 .mpd 文件作为索引。
• FLV (Flash Video)：曾经的网页视频霸主。目前主要使用基于 HTTP 长连接传输的 HTTP-FLV 协议，因其超低延迟（1~3秒）仍是国内直播的主流方案。

---

💡 核心解答：解析器是配合什么播放器的？

解析器（如 flv.js、hls.js）与播放器（如 DPlayer、Video.js）的关系是“底层引擎”与“上层外壳”的关系。解析器既可以作为独立引擎直接喂给原生 <video> 标签，也可以作为插件被集成到各大播放器中。

常见的配合方式如下：

1. 配合 DPlayer：DPlayer 本身不包含解析器，当检测到视频源是 .flv 时，自动调用 flv.js 引擎；当检测到是 .m3u8 时，自动调用 hls.js 引擎。
2. 配合 Video.js：Video.js 通过插件生态调用解析器。例如引入 videojs-flvjs 插件来调用 flv.js，或引入 videojs-contrib-hls 来调用 hls.js。
3. 配合 XGPlayer：XGPlayer 采用独立的插件包设计。开发者需单独安装 xgplayer-flv 或 xgplayer-hls 插件，内部集成了对应的解析器。
4. 配合原生 HTML5 <video> 标签：解析器可脱离任何播放器框架独立使用。例如直接引入 flv.js，创建实例后将其绑定（attach）到页面中一个普通的 <video> 标签上，实现无 UI 的底层播放。

总结：如果您需要快速搭建一个好看的播放页面，请选择播放器；如果您需要自己从头开发一套独特的播放器 UI，只需引入对应的解析器即可。