一、介绍

video.js官网文档：https://docs.videojs.com/
npm地址：https://www.npmjs.com/package/video.js

二、安装

yarn add video.js @types/video.js -D
// 或者
// npm i video.js @types/video.js -D

三、在main.ts中引入css

import 'video.js/dist/video-js.css'

四、创建 VideoPlayer.vue组件

<template>
  <video ref="rVideoPlayer" class="video-js vjs-default-skin"></video>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted,defineProps } from 'vue'
import videoJs from 'video.js'
const props = defineProps({
  options: {
    type: Object,
    default: () => ({}),
  }
})

const rVideoPlayer = ref<Element>()
let player = ref()
onMounted(() => {
  player.value = videoJs(rVideoPlayer.value as Element, props.options)
})
onUnmounted(() => {
  if (player.value) {
    player.value.dispose()
  }
})
</script>

五、在需要的地方使用 VideoPlayer.vue组件

<template>
  <video-player  :options="videoOption"></video-player>
</template>
<script lang="ts" setup>
  import VideoPlayer from '@/components/VideoPlayer.vue'
let videoOption = reactive({
  autoplay: true,
  controls: true,
  sources: [
    {
      src: 'xxx.m3u8',
      type:'application/x-mpegURL'
    }
  ],
  width:'640px',
  height:'360px'
})
</script>