vue3视频播放器选型对比以及详细说明

一、 视频播放器对比表格（新增支持类型与浏览器兼容性）

播放器名称	优点	缺点	支持的类型	浏览器兼容性	文档地址	示例地址	Git 地址
xgplayer	1. 功能丰富，支持截图、自定义插件等 2. 中文文档，功能释义清晰 3. 在线配置生成代码，提升开发体验 4. 积极维护，优化体验 5. 支持多种视频格式和自定义插件	1. 直播和特定格式需要 MSE 支持 2. 移动端（iOS/Android）对某些格式有限制 3. 进度条拖动时声音可能出现卡顿 4. 自动播放限制，部分浏览器和 APP 表现不一致 4. hls 和 flv 不能同时添加，需要自定义逻辑	- MP4（H.264/AAC） - HLS（M3U8） - FLV（需 MSE 支持） - MPEG-DASH（部分支持）	1. 桌面端：Chrome、Edge、Firefox（需 MSE 支持） 2. 移动端：iOS Safari（不支持 FLV） Android 浏览器（需 MSE 支持 FLV 和 DASH）	文档地址	示例地址	Git 地址
Video.js	1. 支持多种视频格式和流媒体协议（HLS、DASH 等） 2. 丰富的插件生态（字幕、广告、质量选择等） 3. 高度可定制（主题、API、事件处理） 4. 跨平台兼容 5. 文档完善，社区活跃 6. 功能全面，可满足大部分需求	1. 库体积较大，可能影响加载速度 2. 学习曲线较陡峭，功能全面但复杂 3. Vue3 等框架需手动封装或使用第三方库 4. 英文文档对国内开发者不够友好 5. 默认不支持 flv 格式，需要安装插件 6. 没有自带截图功能，需额外开发	- MP4 - HLS（M3U8） - DASH - WebM - FLV（需插件支持）	1. 桌面端：Chrome、Edge、Firefox 2. 移动端：iOS Safari、Android 浏览器	文档地址	示例地址	Git 地址
hls.js	1. 纯 JavaScript 编写，无需插件或本地代码 2. 广泛支持现代浏览器和移动设备 3. 支持自适应码率，流畅播放 4. 实时直播支持 5. 多音轨和多字幕切换 6. 丰富的 API 和事件	1. 仅支持 HLS（m3u8）协议 2. 需要浏览器支持 MSE（部分老旧浏览器或 iOS Safari 不支持）	- HLS（M3U8）	1. 桌面端：Chrome、Edge、Firefox（需 MSE 支持） 2. 移动端：iOS Safari（原生支持 HLS），部分Android 浏览器需 MSE 支持	文档地址	-	Git 地址
Aliplayer	1. 提供截图、视频列表等功能 2. 中文文档，支持在线配置 3. 高分辨率和高比特率优化 4. 集成 flv 和 hls 格式，开箱即用 5. 刷新和切换页面加载速度较快 6. 支持 4K 播放	1. 移动端 H5 模式不支持 flv 播放 2. 音量调节在 iOS 和部分 Android 系统失效 3. 自动播放限制较多 4. Safari 浏览器下 flv 视频不支持截图 5. 回放体验不统一（刷新和切换后表现不同） 6. 高级功能（如 H.265）需要商业授权 7. 文档混乱，目录不清晰	- MP4（H.264/AAC） - HLS（M3U8） - FLV	1. 桌面端：Chrome、Edge、Firefox 2. 移动端：iOS Safari（不支持 FLV） Android 浏览器（部分功能支持有限）	文档地址	示例地址	Git 地址
JW Player	1. 功能强大，支持广告、分析、DRM、直播等 2. 提供专业的技术支持 3. 免费版可满足基础需求 4. 适合商业用途，支持企业级服务	1. 免费版有功能限制（品牌水印、带宽限制、无法使用高级功能如 DRM、广告等） 2. 不是开源项目，可定制性有限 3. 高级功能收费，成本较高	- MP4 - HLS（M3U8） - DASH - WebM - DRM 保护格式	1. 桌面端：Chrome、Edge、Firefox 2. 移动端：iOS Safari、Android 浏览器	文档地址	-	-

---

对比总结（新增浏览器兼容性）

1. xgplayer：

   1. 桌面端兼容主流浏览器（Chrome、Edge、Firefox），但需 MSE 支持。
   2. 移动端对某些格式有限制（如 iOS 不支持 FLV），需注意平台适配。

2. Video.js：

   1. 跨平台兼容性较好，支持桌面和移动端。
   2. 默认不支持 FLV，需额外插件实现。

3. hls.js：

   1. 专注 HLS 协议，支持所有兼容 MSE 的现代浏览器。
   2. 移动端 iOS 原生支持 HLS，但部分 Android 浏览器需要额外支持。

4. Aliplayer：

   1. 移动端兼容性有一定限制（如 H5 模式不支持 FLV）。
   2. 适合国内开发者，但需注意商业授权问题。

5. JW Player：

   1. 兼容性全面，支持主流桌面和移动端浏览器。
   2. 高级功能需付费，免费版功能受限。

二、详细说明

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

• 它是一个纯 JavaScript 库，可以独立使用，也可以与各种框架（如 Vue、React、Angular）集成。
• 文档地址： videojs.com/ 示例地址： videojs.com/advanced/?v… Git 地址： github.com/videojs/vid…

优点

1. 功能丰富

   1. 多格式支持：支持 MP4、WebM、FLV、HLS、DASH 等多种视频格式和流媒体协议。
   2. 插件生态：拥有大量官方和第三方插件，如字幕支持、广告插入、播放列表、质量选择等。
   3. 自适应流媒体：支持 HLS 和 DASH，自适应码率流媒体播放。
   4. 跨平台兼容：在桌面和移动设备上表现良好，兼容主流浏览器。

2. 高度可定制

   1. 主题和皮肤：可以通过 CSS 自定义播放器的外观。
   2. API 丰富：提供了丰富的 API，可控制播放器的各个方面。
   3. 事件处理：支持大量事件监听，方便添加自定义逻辑。

3. 社区活跃

   1. 文档完善：官方文档详细，提供了使用指南和示例。
   2. 社区支持：活跃的开发者社区，定期更新和维护。

缺点

1. 体积较大

   1. 资源占用：功能的丰富性导致库的体积较大，可能影响初始加载时间。

2. 学习曲线陡峭

   1. 复杂度高：对于初学者，全面掌握其功能和定制需要一定的时间。

3. 需要手动集成

   1. 框架集成：在 Vue3 等框架中，需要手动封装组件或寻找第三方封装库。

4. 英文文档：上手学习播放器难度大，且后期维护成本高（搭建 demo 时，发现英文文档对开发有影响）

• 学习曲线：提供广泛功能，可能需要一定时间来理解其概念、API 等
• 不支持 flv 格式，但是可以通过安装 videojs-flvjs-es6 插件，同时安装 flv.js 库，来提供 flv 格式支持（但是 videojs-flvjs-es6 库的 star 太少，可能会出现其他问题）
• 没有自带截图功能，需要自己开发

---

3、 hls.js

  文档地址：

  github：github.com/video-dev/h…

1. 纯 JavaScript 实现

   1. hls.js 完全使用 JavaScript 编写，无需任何插件或本地代码。
   2. 不依赖 Flash 或 Silverlight 等过时的技术。

2. 广泛的浏览器支持

   1. 支持所有兼容 MSE 的浏览器，包括 Chrome、Firefox、Edge 和部分版本的 IE（IE11+）。
   2. 在移动端，iOS 和部分安卓浏览器原生支持 HLS，无需使用 hls.js。

3. 高级流媒体功能

   1. 自适应码率（ABR） ：根据用户的网络状况，自动选择最佳的流质量，提供流畅的观看体验。
   2. 实时直播支持：支持低延迟的直播流播放。
   3. 音视频同步：确保音频和视频轨道的同步播放。
   4. 多音轨和多字幕：支持切换多种音频轨道和字幕。

4. 丰富的 API 和事件

   1. 提供了灵活的 API，可用于控制播放、获取流信息、监听事件等。
   2. 方便开发者进行自定义和扩展。

5. 错误处理和恢复

   1. 内置了对常见错误的处理机制，如缓冲区溢出、网络错误等。
   2. 自动尝试重新连接或恢复播放，提升用户体验。

6. 模块化设计

   1. 支持按需加载模块，减少不必要的代码，提高加载性能。

---

• hls.js 的工作原理：

  • 媒体源扩展（MSE）

    1. MSE 是一种浏览器 API，允许 JavaScript 动态地创建媒体流并将其发送到 <video> 或 <audio> 元素进行播放。
    2. hls.js 利用 MSE，将 HLS 流媒体分片（TS 文件）下载、解析、解码后，注入到媒体源中。

  • HLS 流的解析

    1. hls.js 下载 .m3u8 播放列表文件，获取媒体片段的 URL。
    2. 根据需要下载对应的 TS 片段。

  • 自适应码率

    1. hls.js 监控播放器的缓冲情况、下载速度和播放状态。
    2. 动态调整所下载的媒体片段质量，切换到适合当前网络状况的码率。

  • 错误处理

    1. 当网络波动或发生错误时，hls.js 能够尝试重新连接、跳过错误片段或切换到低质量流，尽可能保持播放不中断。

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、 JW Player

• 简介：一个商业的视频播放器，提供免费和收费版本。

• 优点：

  • 功能强大：支持广告、分析、DRM、直播等高级功能。
  • 专业支持：提供技术支持和服务。

• 缺点：

  • 收费：高级功能需要付费，免费版本有功能限制。
  • 封闭性：不是开源项目，可定制性有限。

免费版的功能限制

1. 品牌水印

   1. 播放器品牌化：免费版的 JW Player 通常会在播放器上显示 JW Player 的标志或水印，无法移除或自定义。
   2. 限制自定义：播放器的外观和功能自定义选项受限，无法完全匹配您的品牌形象。

2. 功能受限

   1. 高级功能缺失

   2. ：免费版不支持高级功能，如：

      • DRM 保护：无法播放受 DRM 保护的内容。
      • 广告集成：不支持视频广告的插入和管理。
      • 高级分析：无法获取详细的观众行为和视频性能分析数据。
      • 多码率和自适应流：可能不支持 HLS、DASH 等高级流媒体协议。
      • 字幕和多音轨：对字幕和多音轨的支持有限。

3. 流量和带宽限制

   1. 播放次数限制：免费版可能对每月的视频播放次数设有上限。
   2. 带宽限制：对视频传输的总带宽使用量可能有限制。

4. 技术支持

   1. 有限的支持：免费用户通常无法获得官方的技术支持或仅限于社区支持。
   2. 响应时间：即使有支持，响应时间也可能较长。

5. 托管和交付

   1. 存储限制：可能对上传和存储的视频数量或总容量有限制。
   2. CDN 支持：免费版可能不包括全球内容分发网络（CDN）服务，影响视频的加载速度和稳定性。

6. API 和集成

   1. API 访问受限：对某些开发者 API 的访问可能受限，无法进行深度定制或集成。
   2. 第三方集成：与其他平台或服务的集成能力可能受限。

---

收费方式和付费计划

• JW Player 提供多种付费计划，以满足不同用户和企业的需求。以下是常见的收费方式和付费计划概述：

  • 起步计划（Starter Plan）

    1. 适用对象：个人开发者、小型网站或初创企业。

    2. 功能特点

    3. ：

       • 去除品牌水印：可以移除 JW Player 的品牌标志。
       • 基本功能：支持自定义播放器外观、基础的分析工具等。
       • 有限的流量：提供一定的播放次数和带宽额度。

    4. 收费方式：通常为每年订阅制，费用在几百美元左右，具体价格可能因地区和促销活动而异。

  • 商业计划（Business Plan）

    1. 适用对象：中小型企业、需要更多功能的网站。

    2. 功能特点

    3. ：

       • 高级功能：支持广告集成、基本的 DRM 支持、自适应流媒体等。
       • 更高的流量限制：增加每月的播放次数和带宽额度。
       • 技术支持：提供标准级别的技术支持服务。

    4. 收费方式：按年订阅，费用较起步计划更高，可能在每年数千美元。

  • 企业计划（Enterprise Plan）

    1. 适用对象：大型企业、媒体公司、高流量网站。

    2. 功能特点

    3. ：

       • 全面的功能支持：包括高级 DRM、全套广告功能、详细的分析和报告、API 访问等。
       • 定制化服务：根据客户需求定制解决方案，提供专属的客户经理和技术支持团队。
       • 无限或更高的流量：可根据需要协商更高的播放次数和带宽。

    4. 收费方式：定制报价，通常需要直接联系 JW Player 的销售团队，费用可能在每年数万美元甚至更高。

  • 按使用量付费

    1. 适用对象：不想被固定计划限制，或者流量波动较大的用户。

    2. 功能特点

    3. ：

       • 灵活性：根据实际使用的播放次数和带宽付费。
       • 可扩展性：适合需要灵活调整资源的企业。

    4. 收费方式：根据实际使用量计费，具体费率需要与 JW Player 协商。