记录一下vue3项目使用video.js

1、安装依赖 

pnpm i video.js

2、创建 组件 videoPlayer

<template>
  <video ref="videoRef" class="video-js video-demo"></video>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
const props = defineProps({
  options: {
    type: Object,
    default() {
      return {};
    }
  }
});
const videoRef = ref();

const video = ref();

onMounted(() => {
  video.value = videojs(videoRef.value, props.options, function onPlayerReady() {
    console.log("onPlayerReady");
  });
});
onUnmounted(() => {
  if (videoRef.value) {
    video.value.dispose();
  }
});
</script>

<style scoped lang="scss">
.video-demo {
  width: 100%;
  max-height: 400px;
}
</style>

3、在相应页面引用这个组件，就可以了， 传入参数参考https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/docs/guides/options.html

注意事项： 

        1、video标签class 一定要有"video-js"

        2、组件中要引入css， import "video.js/dist/video-js.css"

这两个缺一不可呦！