【Vue-video】Video 封装组件-Copy直接用解决封装BUG
前言
这个 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。
如果你自己自定义组件操作布局，那就是你的另外的事情咯！
好啦~就这样！