Vue3环境中xgplayer实现监控视频播放

• EasyPlayer.vue

<template>
	<div>
		<div class="easy-player" >
			<div class="ant-modal-mask"></div>
			<div class="modal-content">
				<div class="box-title" :title="props.videoName">{{ props.videoName || '视频播放' }}</div>
				<CloseOutlined className="close" @click="onClose()" />
				<div class="video-box">
					<div class="video-box-item">
						<iframe
							id="hkIframe1"
							scrolling="no"
							src="/xgplayer/player.html"
						></iframe>
						<div class="video-box-item" v-if="playUrlList.length > 1">
							<iframe
								id="hkIframe2"
								scrolling="no"
								src="/xgplayer/player.html"
							></iframe>
						</div>
						<div class="video-box-item" v-if="playUrlList.length > 2">
							<iframe
								id="hkIframe3"
								scrolling="no"
								src="/xgplayer/player.html"
							></iframe>
						</div>
						<div class="video-box-item" v-if="playUrlList.length > 3">
							<iframe
								id="hkIframe4"
								scrolling="no"
								src="/xgplayer/player.html"
							></iframe>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script setup>

import { onMounted, ref, watch } from 'vue'
import { isEmpty } from 'lodash'
import { CloseOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { queryPreviewUrl } from '@/api/resourceSearch'

const props = defineProps({
	videoCode: {
		type: String,
		default: '',
	},
	videoName: {
		type: String,
		default: ''
	},
	videoState: {
		type: Object,
		default: null
	},
})

const hkIframe = ref([])
const playUrlList = ref([])
const emits = defineEmits(['closeEasyPlayer'])
onMounted(() => {
	console.log('output->[onMounted]props.videoCode::props.videoName ', props.videoCode, props.videoName)
})

const loadPlayUrlList = async (videoCode) => {
	console.log('output-> videoCode::: [loadPlayUrlList]', videoCode)
	if(isEmpty(videoCode)) {
		message.info('该点位没有视频编码！')
		return
	}
	const res = await queryPreviewUrl({
		chanId: videoCode
	})
	console.log('output-> res.data 【loadPlayUrlList】', res.data)
	if (res.status === 200) {
		if (res.data.data) {
			playUrlList.value = [res.data.data]
		} else {
			message.info('暂无视频')
		}
	}
}

watch(() => props.videoCode, () => {
	console.log('output-> props.videoCode', props.videoCode)
	loadPlayUrlList(props.videoCode)
}, {deep: true, immediate: true})

watch(() => playUrlList.value, () => {
	console.log('output-> props.playUrlList [EasyPlayer] 

标签：xgplayer,videoCode,100%,Vue3,value,height,video,props,播放	

From： https://www.cnblogs.com/openmind-ink/p/18364550