全面横评 6 大前端视频播放器

#前言

最近，我在负责公司的音视频开发，使用的技术栈是 Vue3，技术方案采用的是基于第三方库二次封装播放器组件，来实现公司的业务定制需求。

市面上有很多第三方视频库，在最开始进行技术选型的时候，我也花了很多时间。

现在初步把我们公司的音视频组件开发完成了，我对视频第三方库的技术选型进行一个总结分享，希望能帮助到正在进行音视频开发的你。

这次技术选型一共会对比 6 个第三方库：xgplayer、video.js、ckplayer x3、aliplayer、tcplayer、flv.js。

在对比每个第三库时，我都会给出文档地址、示例、Git 地址，便于大家自行对比。

我会给出收集到的每个第三方库的优缺点分析。对于部分重要的第三方库，将进行详细的优缺点分析；而对于涉及闭源等不可接受情况的库，优缺点分析将较为简略，不再深入对比。

因为我们技术团队的英文水平还达不到无障碍阅读英文文档的地步，所以第三库的文档是否支持中文，也是我们考虑的一个因素。

我们技术团队详细对比这些第三方库之后，最后选择的是 xgplayer。

好了，接下来开始分析以上提到的 6 个音视频第三方库~

#1. xgplayer（推荐）

这个库也是我们现在所采用的库，整体使用下来感觉很不错，文档很详细，支持自定义插件，社区活跃~
文档地址： h5player.bytedance.com/
示例地址： h5player.bytedance.com/examples/
Git 地址： github.com/bytedance/x…

#优点

1. 基本满足现有功能，自带截图 等功能
2. 中文文档，有清晰详细的功能释义
3. 可通过在线配置和生成对应功能代码参考，预览配置后的视频效果，开发体验好
4. 项目积极维护
5. 近期从 v2 版本升级到了 v3版本，优化了很多功能，开发体验更好
6. 支持自定义插件，对开发业务定制需求很有用

#缺点

1. 直播需要浏览器支持Media Source Extensions
2. PC Web端支持直接播放mp4视频，播放HLS、FLV、MPEG-DASH需要浏览器支持Media Source Extensions
3. iOS Web端支持直接播放mp4和HLS，不支持播放FLV、MPEG-DASH（iOS webkitwebview 均不支持MediaSource，因此无法支持flv文件转封装播放）
4. Android Web端支持直接播放mp4和HLS，播放FLV、MPEG-DASH需要浏览器支持Media Source Extensions
5. 进度条拖动：拖动时，视频会一直播放当前拖动视频帧的声音，导致挺起来声音一卡一卡的，而且拖动一停止就立马开始播放视频
6. 自动播放限制：对于大多数移动 webview 和浏览器，默认情况下会阻止有声自动播放。可以设置静音起播，达到自动播放的目的，不能保证一定能够自动播放，不同的app和浏览器配置不一样，表现不一样
7. 打点功能没有提供图片的配置，可能需要二次开发或者用预览功能
8. hls和flv不能同时添加，但是可以自己通过逻辑判断，去允许 hls 和 flv 同时播放
9. Android 在网页端打开后截图很模糊

#2. video.js（候选）

文档地址： videojs.com/
示例地址： videojs.com/advanced/?v…
Git 地址： github.com/videojs/vid…

#优点

1. 功能全面：提供暂停、播放等功能，基本满足项目所有功能需求
2. 社区情况：社区活跃，项目持续维护
3. 插件和主题丰富：可以根据需求进行定制和扩展
4. 跨平台和浏览器兼容性：支持跨平台播放，适用于各种设备和操作系统
5. 进度条拖动时，视频暂停，且能预览当前拖动所处位置，在放开拖动时，才开始播放视频，体验比较好

#缺点

1. 英文文档：上手学习播放器难度大，且后期维护成本高（搭建 demo 时，发现英文文档对开发有影响）
2. 学习曲线：提供广泛功能，可能需要一定时间来理解其概念、API 等
3. 不支持 flv 格式，但是可以通过安装 videojs-flvjs-es6 插件，同时安装 flv.js 库，来提供 flv 格式支持（但是 videojs-flvjs-es6 库的 star 太少，可能会出现其他问题）
4. 没有自带截图功能，需要自己开发

#3. ckplayer x3（候选）

文档地址： www.ckplayer.com/
示例地址： www.ckplayer.com/demo.html
Git 地址： gitee.com/niandeng/ck…

#优点

1. 功能丰富，且提供良好的示例
2. 中文文档，文档相对比较丰富和专业
3. 格式支持度较高，通过插件还可以播放 ts、mpd 等视频

#缺点

1. 社区支持不够丰富，如果以后有扩展功能需求，不便开发
2. git 仓库 issue 响应慢，后续出问题，可能不便解决
3. 文档的左侧菜单的交互不太友好，功能模块分级不够清晰，导致查找 API 不方便
4. 没有直接提供视频列表（通道切换）的功能或插件
5. 进度条拖动：拖动时，视频一直在播放，且没有显示当前所处拖动位置的预览画面，用户不知道当前拖动所处的具体位置，体验不佳

#4. aliplayer（候选）

文档地址： player.alicdn.com/aliplayer/i…
示例地址： player.alicdn.com/aliplayer/p…
Git 地址： github.com/aliyunvideo…

#优点

1. 基本满足现有功能需求，自带截图、视频列表等功能
2. 提供部分功能演示和在线配置
3. 中文文档
4. 支持4K视频播放，并且具备高分辨率和高比特率视频的优化能力
5. 刷新和切换页面的 loading 时间比 xgplayer 短
6. 播放器内部集成 flv 和 hls 格式，可以直接播放

#缺点

1. Web播放器H5模式在移动端不支持播放FLV视频，但可播 HLS（m3u8）
2. Web播放器提供的音量调节方法在iOS系统和部分Android系统会失效
3. 自动播放限制：由于浏览器自身的限制，在Web播放器SDK中无法通过设置autoplay属性或者调用play()方法实现自动播放。只有视频静音才可以实现自动播放或者通过用户行为手动触发播放
4. 截图功能限制：fiv 视频在Safari浏览器下不支持截图功能。即使启用截图按钮也不会出现
5. 回放时，必须点击播放按钮那个图标才能播放，体验不佳。且鼠标悬停时，会显示视频控制栏，但点击控制栏，视频无对应功能响应，体验不佳
6. 回放播放效果不统一：同样的设置，刷新页面时视频不会自动播放，切换页面再回来，视频会自动播放
7. 有些高级功能需要商业授权：Web播放器SDK从2.14.0版本开始支持播放H.265编码协议的视频流，如需使用此功能，您需要先填写表单申请License授权
8. 文档：文档目录混乱且杂糅其他播放器不需要的文档
9. 进度条拖动：拖动时，视频会一直播放当前拖动视频帧的声音，导致听起来声音一卡一卡的，而且拖动一停止就立马开始播放视频

#5. tcplayer（不推荐）

文档地址： cloud.tencent.com/document/pr…
示例地址： tcplayer.vcube.tencent.com/
Git 地址： 闭源，无 git 仓库

#优点

1. 断点续播：播放失败时自动重试，支持直播的自动重连功能

#缺点

1. 文档不丰富，示例功能不多
2. 闭源项目，出现问题不好解决
3. 内置的功能和插件相对阿里云和 CK 较少
4. web 端截图功能不支持

#6. flv.js（不推荐）

文档地址： github.com/bilibili/fl…
示例地址： bilibili.github.io/flv.js/demo…
Git 地址： github.com/bilibili/fl…

#优点

1. 由于浏览器对原生Video标签采用了硬件加速，性能很好，支持高清

#缺点

1. 文档：缺乏详细功能说明文档，只有 md 英文文档，文档阅读不方便
2. 项目很久未更新，原作已离开哔站，虽已开源，但后期应该不会有啥版本升级和优化
3. 播放 flv 格式需要依赖 Media Source Extensions，但目前所有 iOS 和 Android4.4.4 以下的浏览器都不支持

#结语

以上是我对音视频第三方库进行技术选型对比的一个总结。如果有更好的见解或者其他补充，欢迎在评论区留言或者私聊我进行沟通。