vue3使用西瓜播放器播放flv、hls、mp4视频

vue3使用西瓜播放器播放flv、hls、mp4视频

安装相关的插件

npm install xgplayer

npminstall xgplayer-flv

npm install xgplayer-hls

npm install  xgplayer-mp4

组件封装

<template><div :id="`${playerId}`" />
</template>
<script setup lang="ts">
import Player from 'xgplayer'
import FlvPlugin from 'xgplayer-flv'
import HlsPlugin from 'xgplayer-hls'
import Mp4Plugin from 'xgplayer-mp4'
import 'xgplayer/dist/index.min.css'
import { ref, watch, onMounted, onUnmounted } from 'vue'interface propsType {playerId?: stringwidth?: numberheight?: numberurl: stringplugin?: 'flv' | 'hls' | 'mp4'fitVideoSize?: 'fixed' | 'fixWidth' | 'fixHeight' | undefinedcontrols?: boolean
}const props = withDefaults(defineProps<propsType>(), {playerId: 'playerContainer',width: 640,height: 320,url: '',plugin: 'hls',fitVideoSize: 'fixWidth',controls: true
})
const player = ref<any>(null)
const clientWidth = ref<number>(1920)
const clientHeight = ref<number>(1080)onMounted(() => {init()clientWidth.value = document.body.clientWidthclientHeight.value = document.body.clientHeightwindow.addEventListener('resize',() => {clientWidth.value = document.body.clientWidthclientHeight.value = document.body.clientHeightinit()},false)
})
watch(() => props.url,() => {init()},{ deep: true }
)
const getPlugins = () => {let plugins = [Mp4Plugin]switch (props.plugin) {case 'hls':// @ts-expect-error version报错plugins = [HlsPlugin]breakcase 'flv':// @ts-expect-error version报错plugins = [FlvPlugin]breakdefault:plugins = [Mp4Plugin]break}return plugins
}
const init = async () => {player.value = new Player({id: props.playerId,isLive: true,autoplayMuted: true,autoplay: true,plugins: await getPlugins(),url: props.url,fitVideoSize: props.fitVideoSize,height: props.height * (clientHeight.value / 1080),width: props.width * (clientWidth.value / 1920),lang: 'zh-cn',controls: props.controls})
}
/*** 销毁播放器*/
onUnmounted(() => {player.value.destroy()
})
</script>