前言
这个 Vue 组件是通过组合式API编写的的语法。
大家在使用 video 的时候是不是都在为这个视频资源需要销毁问题烦恼，但你今天不用担心，我来为你解答错误封装的 BUG，直接上源代码。
代码
请先确保自己已经通过命令安装了 video
<template>
<video class="video-js rounded-box" :width="width" :height="height" :id="id" ></video>
</template>
<script setup lang="ts">
import videojs from 'video.js'
/** 虽然是动态的，但未监听 值 变化重新初始化 */
const width = defineModel('width', {type: String, required: true})
const height = defineModel('height', {type: String, required: true})
const id = defineModel('id', {type: String, required: true})
const src = defineModel('src', {type: String, required: true})
/** 初始化视频播放 video 组件 */
const video = ref(undefined)
const initVideo = async () => {
if (!src.value) return //video 在设置 src 原数据时不能为 null，再注意就是需要在 onBeforeUnmount() 方法销毁资源
let options = {
// autoplay: id === 1 ? 'any' : false, // 是否自动播放
autoplay: false,
controls: true, // 显示播放的控件
sources: [
{
src: src.value,
type: "application/x-mpegURL"
}
]
}
const player = video.value === undefined ? (await videojs(id.value, options)) : video.value
// console.log('player -> ', player !== undefined)
// console.log('id -> ', id.value !== undefined)
// console.log('src -> ', src.value !== undefined)
player.src(src.value)
player.on('ended', () => {console.log('播放完成ID:' + id.value)})
video.value = player
}
/** 释放组件资源（这是必须的） */
const destroy = async () => {
if (video.value) {
await video.value.dispose()
// console.log('销毁组件：' + id.value)
}
}
defineExpose({ destroy }) //向外部提供销毁资源方法
/** 监听数据变化，重新初始化 */
watch(src, () => { //不允许监听 ID 变化更新，有组件调整顺序后出BUG，只需要更新 src 源数据即可
initVideo()
})
/** 释放播放器资源，去除上一次绑定 Video DOM BUG */
onBeforeUnmount(() => {
destroy()
})
/** 初始化 **/
onMounted(() => {
// 初始化视频组件
initVideo()
})
</script>
<style scoped>
.rounded-box {
border: 2px solid #ccc;
border-radius: 10px; /* 圆角半径为 10 像素 */
}
</style>使用方式：
<Video width="700px" height="430px" id="整个项目唯一字符串ID" :src="视频资源地址" />封装注意事项
videojs(id, options) 生成的组件对象注意不要重复调用生成，保留对象引用，方便销毁 src 视频资源。
videojs(id, options) 生成的组件对象 的 id 确保是在整个项目中唯一的，因为生成的组件全部都是 videojs 统一管理的。
在设置 src 原数据时不能为 null 。
需要在 onBeforeUnmount() 方法销毁资源。
销毁资源使用的方法 videojs(id, options) 生成的组件对象，调用 dispose() 。
只要注意以上几个点，你封装的组件绝对不会出现什么基本的 BUG。
如果你自己自定义组件操作布局，那就是你的另外的事情咯！
好啦~就这样！