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] 🔺🔺', playUrlList.value)
	if (!isEmpty(playUrlList.value)) {
		playUrlList.value.map((item, index) => {
			if (index < 4) {
				initHkIframe(index + 1, item)
			}
		})
	}
}, { deep: true })

function initHkIframe(i, code) {
	hkIframe.value[i] = document.getElementById('hkIframe' + i)
	if (
		hkIframe.value[i] &&
		hkIframe.value[i].contentWindow &&
		hkIframe.value[i].contentWindow.initPlugin
	) {
		hkIframe.value[i].contentWindow.initPlugin(code)
	} else {
		setTimeout(() => {
			initHkIframe(i, code)
		}, 1000)
	}
}

function onClose() {
	emits('closeEasyPlayer')
}
</script>

<style lang="scss" scoped>
.easy-player {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	left: 0;
	right: 0;

	:deep(.anticon) {
		position: absolute;
		top: 10px;
		right: 20px;
		font-size: 25px;
	}

	.modal-content {
		width: 80%;
		z-index: 99999;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: transparent;
		padding: 0;
	}

	.box-title {
		width: 100%;
		height: 42px;
		color: #fff !important;
		font-weight: 600;
		font-size: 18px;
		line-height: 42px;
		padding-left: 24px;
		padding-right: 60px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		background: linear-gradient(
				90deg,
				#0472cc 0%,
				rgba(25, 144, 238, 0.45) 51.61%,
				rgba(15, 114, 231, 0.2) 100%
		);
	}

	.video-box {
		background: radial-gradient(100% 209.83% at 0% 0%, rgba(8, 92, 160, 0.8) 0%, rgba(8, 92, 160, 0.6) 100%);
		overflow: hidden;
		padding: 10px;

		.video-js {
			margin: 0 auto;

			.vjs-subs-caps-button {
				display: none;
			}
		}

	}
}


.modal-content1 {
	width: 50%;
	height: auto;
}

.video-box1 {
	.video-box-item {
		width: 100%;
		height: 540px;
	}
}

.video-box2, .video-box3, .video-box4 .video-box-item {
	width: 50%;
	float: left;
	height: 425px;
	padding: 0 10px;
}

.video-box3, .video-box4 .video-box-item {
	margin-bottom: 15px;
}

.video-js {
	height: 100%;
	width: 100%;
}


iframe {
	width: 1500px;
	height: 600px;
	border: none;
}

</style>

• EasyPlayer组件使用

				<EasyPlayer
					v-if="!isEmpty(videoState.videoCode)"
					@closeEasyPlayer="closePlayerModal"
					:videoState="videoState"
					:videoCode="videoState.videoCode"
					:videoName="videoState.videoName"
				></EasyPlayer>