一、介绍
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>
