全面横评 6 大前端视频播放器 - Vue3 项目应该怎么选?
前言
最近，我在负责公司的音视频开发，使用的技术栈是 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…
优点
- 基本满足现有功能，自带截图 等功能
- 中文文档，有清晰详细的功能释义
- 可通过在线配置和生成对应功能代码参考，预览配置后的视频效果，开发体验好
- 项目积极维护
- 近期从 v2 版本升级到了 v3版本，优化了很多功能，开发体验更好
- 支持自定义插件，对开发业务定制需求很有用
缺点
- 直播需要浏览器支持Media Source Extensions
- PC Web端支持直接播放mp4视频，播放HLS、FLV、MPEG-DASH需要浏览器支持Media Source Extensions
- iOS Web端支持直接播放mp4和HLS，不支持播放FLV、MPEG-DASH（iOS webkitwebview 均不支持MediaSource，因此无法支持flv文件转封装播放）
- Android Web端支持直接播放mp4和HLS，播放FLV、MPEG-DASH需要浏览器支持Media Source Extensions
- 进度条拖动：拖动时，视频会一直播放当前拖动视频帧的声音，导致挺起来声音一卡一卡的，而且拖动一停止就立马开始播放视频
- 自动播放限制：对于大多数移动 webview 和浏览器，默认情况下会阻止有声自动播放。可以设置静音起播，达到自动播放的目的，不能保证一定能够自动播放，不同的app和浏览器配置不一样，表现不一样
- 打点功能没有提供图片的配置，可能需要二次开发或者用预览功能
- hls和flv不能同时添加，但是可以自己通过逻辑判断，去允许 hls 和 flv 同时播放
- Android 在网页端打开后截图很模糊
2. video.js（候选）
文档地址： videojs.com/
示例地址： videojs.com/advanced/?v…
Git 地址： github.com/videojs/vid…
优点
- 功能全面：提供暂停、播放等功能，基本满足项目所有功能需求
- 社区情况：社区活跃，项目持续维护
- 插件和主题丰富：可以根据需求进行定制和扩展
- 跨平台和浏览器兼容性：支持跨平台播放，适用于各种设备和操作系统
- 进度条拖动时，视频暂停，且能预览当前拖动所处位置，在放开拖动时，才开始播放视频，体验比较好
缺点
- 英文文档：上手学习播放器难度大，且后期维护成本高（搭建 demo 时，发现英文文档对开发有影响）
- 学习曲线：提供广泛功能，可能需要一定时间来理解其概念、API 等
- 不支持 flv 格式，但是可以通过安装 videojs-flvjs-es6 插件，同时安装 flv.js 库，来提供 flv 格式支持（但是 videojs-flvjs-es6 库的 star 太少，可能会出现其他问题）
- 没有自带截图功能，需要自己开发
3. ckplayer x3（候选）
文档地址： http://www.ckplayer.com/
示例地址： http://www.ckplayer.com/demo.html
Git 地址： gitee.com/niandeng/ck…
优点
- 功能丰富，且提供良好的示例
- 中文文档，文档相对比较丰富和专业
- 格式支持度较高，通过插件还可以播放 ts、mpd 等视频
缺点
- 社区支持不够丰富，如果以后有扩展功能需求，不便开发
- git 仓库 issue 响应慢，后续出问题，可能不便解决
- 文档的左侧菜单的交互不太友好，功能模块分级不够清晰，导致查找 API 不方便
- 没有直接提供视频列表（通道切换）的功能或插件
- 进度条拖动：拖动时，视频一直在播放，且没有显示当前所处拖动位置的预览画面，用户不知道当前拖动所处的具体位置，体验不佳
4. aliplayer（候选）
文档地址： player.alicdn.com/aliplayer/i…
示例地址： player.alicdn.com/aliplayer/p…
Git 地址： github.com/aliyunvideo…
优点
- 基本满足现有功能需求，自带截图、视频列表等功能
- 提供部分功能演示和在线配置
- 中文文档
- 支持4K视频播放，并且具备高分辨率和高比特率视频的优化能力
- 刷新和切换页面的 loading 时间比 xgplayer 短
- 播放器内部集成 flv 和 hls 格式，可以直接播放
缺点
- Web播放器H5模式在移动端不支持播放FLV视频，但可播 HLS（m3u8）
- Web播放器提供的音量调节方法在iOS系统和部分Android系统会失效
- 自动播放限制：由于浏览器自身的限制，在Web播放器SDK中无法通过设置autoplay属性或者调用play()方法实现自动播放。只有视频静音才可以实现自动播放或者通过用户行为手动触发播放
- 截图功能限制：fiv 视频在Safari浏览器下不支持截图功能。即使启用截图按钮也不会出现
- 回放时，必须点击播放按钮那个图标才能播放，体验不佳。且鼠标悬停时，会显示视频控制栏，但点击控制栏，视频无对应功能响应，体验不佳
- 回放播放效果不统一：同样的设置，刷新页面时视频不会自动播放，切换页面再回来，视频会自动播放
- 有些高级功能需要商业授权：Web播放器SDK从2.14.0版本开始支持播放H.265编码协议的视频流，如需使用此功能，您需要先填写表单申请License授权
- 文档：文档目录混乱且杂糅其他播放器不需要的文档
- 进度条拖动：拖动时，视频会一直播放当前拖动视频帧的声音，导致听起来声音一卡一卡的，而且拖动一停止就立马开始播放视频
5. tcplayer（不推荐）
文档地址： cloud.tencent.com/document/pr…
示例地址： tcplayer.vcube.tencent.com/
Git 地址： 闭源，无 git 仓库
优点
- 断点续播：播放失败时自动重试，支持直播的自动重连功能
缺点
- 文档不丰富，示例功能不多
- 闭源项目，出现问题不好解决
- 内置的功能和插件相对阿里云和 CK 较少
- web 端截图功能不支持
6. flv.js（不推荐）
文档地址： github.com/bilibili/fl…
示例地址： bilibili.github.io/flv.js/demo…
Git 地址： github.com/bilibili/fl…
优点
- 由于浏览器对原生Video标签采用了硬件加速，性能很好，支持高清
缺点
- 文档：缺乏详细功能说明文档，只有 md 英文文档，文档阅读不方便
- 项目很久未更新，原作已离开哔站，虽已开源，但后期应该不会有啥版本升级和优化
- 播放 flv 格式需要依赖 Media Source Extensions，但目前所有 iOS 和 Android4.4.4 以下的浏览器都不支持
结语
以上是我对音视频第三方库进行技术选型对比的一个总结。如果有更好的见解或者其他补充，欢迎在评论区留言或者私聊我进行沟通。
来源：juejin.cn/post/7359083412386807818
