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
<template>// id：用于获取video对象// class：video-js vjs-default-skin为video内置的样式名称，样式可根据具体项目进行调整// autoplay：自动播放// muted：设置静音。在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频，设置静音是一种hack手段，参考：https://www.mzwu.com/article.asp?id=4411// preload：提前加载<video id="my-video" class="video-js vjs-default-skin" autoplay muted preload="auto">// src：视频流地址// type：视频类型<source src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8" type="application/x-mpegURL" style='width: 100%;height: 100%'></video>
</template><script lang="ts">
// 引入videojs以及样式文件
import videojs from 'video.js/dist/video.min'
import 'video.js/dist/video-js.min.css'
import { defineComponent, onMounted } from "vue"setup() {// 在onMounted阶段进行初始化onMounted(() => {initVideoSourc()})function initVideoSourc() {videojs('my-video', {bigPlayButton: false,textTrackDisplay: false,posterImage: false,errorDisplay: false,controlBar: true,// ...其他配置参数}, function () {this.play()})}
}
</script>2. 多视频、监听视频地址变化综合使用
// VideoComponentB.vue
<template><video v-if="src" :id="videoId" class="video-js vjs-default-skin my-video" autoplay muted preload="auto" style='width: 100%;height: 100%'><source :src="src" type="application/x-mpegURL" style='width: 100%;height: 100%'></video>
</template><script lang="ts">
import videojs from 'video.js/dist/video.min'
import 'video.js/dist/video-js.min.css'
import { defineComponent, watch, onMounted, onBeforeUnmount, computed } from "vue"export default defineComponent({name: 'VideoItem',props: {// 视频地址src: {type: String,required: true},// 视频列表中每个视频的索引值index: {type: Number,default: 0},},setup(props) {// 监听视频地址变化watch(() => props.src,(n) => {changeVideoSource(n)})// 在onMounted阶段进行初始化onMounted(() => {initVideo()})// 在onBeforeUnmount阶段释放资源onBeforeUnmount(() => {disposeVideo()})// 用于多视频列表区分每个视频的idconst videoId = computed(() => {return 'my-video' + props.index})// 初始化视频function initVideo() {if (!props.src) returnvideojs(videoId.value, {bigPlayButton: false,textTrackDisplay: false,posterImage: false,errorDisplay: false,controlBar: false}, () => {const myPlayer = videojs(videoId.value)myPlayer.play()myPlayer.on('error', () => {...})})}// 视频地址发生变化时的处理function changeVideoSource(src) {if (!src) returnconst myPlayer = videojs(videoId.value)myPlayer.src([{type: "application/x-mpegURL",src: src}])myPlayer.play()}function disposeVideo() {const myPlayer = videojs(videoId.value)myPlayer.dispose()}return {videoId,}}
})
</script>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",…
}