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
使用：
- 基础使用
// 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>
- 多视频、监听视频地址变化综合使用
// 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()
})
// 用于多视频列表区分每个视频的id
const videoId = computed(() => {
return 'my-video' + props.index
})
// 初始化视频
function initVideo() {
if (!props.src) return
videojs(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) return
const 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/
安装：
总结
项目使用的各个包及其版本号：
// package.json
"dependencies": {
"video.js": "^7.17.0",
"videojs-contrib-hls": "^5.15.0",
"vue": "^3.2.25",
…
}
