【 攻城略地 】vue3 + video.js播放m3u8视频流格式

video.js

video.js是一个通用的在网页上嵌入视频播放器的JS库，video.js自动检测浏览器对HTML5的支持情况，如果不支持HTML5则自动使用Flash播放器。

文档：

https://github.com/videojs/video.js

videojs中文文档详解_谢泽的网络日志-CSDN博客_video.js

安装：

$ npm install --save video.js videojs-contrib-hls

使用：

1. 基础使用

// VideoComponentA.vue

---

2. 多视频、监听视频地址变化综合使用

// VideoComponentB.vue

vue3-video-play

vue3版本的视频播放插件，但github上反馈移动端支持性不是很好，作者也没有反馈，所以只作为备用方案。

文档：

https://github.com/xdlumia/vue3-video-play

使用：

vue3播放器插件（vue3-video-play）,支持m3u8(hls)视频 - 知乎

vue3中播放视频和m3u8后缀的视频解决办法_一个超爱喝可乐的web前端攻城狮-CSDN博客

MuiPlayer

没用过，作为备用方案。

文档：

https://muiplayer.js.org/zh/demo/

安装：

插件下载 | MuiPlayer

总结

项目使用的各个包及其版本号：

// package.json
"dependencies": {
  "video.js": "^7.17.0",
  "videojs-contrib-hls": "^5.15.0",
  "vue": "^3.2.25",
  …
}