【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。

如果你自己自定义组件操作布局，那就是你的另外的事情咯！

好啦~就这样！