<template>
	<div class="monitors">
		<div class="myVedioBox bg-black">
			<video style="width: 100%;height: 200px;" id="rVideoPlayer" controls autoplay></video>
		</div>
	</div>
</template>

<script setup>
	import flvjs from 'flv.js'
	const { proxy } = getCurrentInstance(); // 获取实例中的proxy
	const props = defineProps({
	  data: {
	    reFresh: [Number, String],
			default: 0
		}
	});
	
	const { reFresh } = toRefs(props);
	const videoPlay = ref();
	let player = null;
	const VideoPlay = function(_url){
		if(player != null){
			player.unload();
			player.detachMediaElement();
			player.destroy();
		}
		if (flvjs.isSupported()) {
			var videoElement = document.getElementById('rVideoPlayer');
			player = flvjs.createPlayer({
			  type: 'flv',
			  isLive: true,
			  hasAudio: false,
			  url: "https://www.enstation.com:8090/live?port=1935&app=live&stream=230704002_001"	
			});
			player.attachMediaElement(videoElement);
			player.load();
			player.play();
		}
	}
	watch(reFresh, (newValue) => {
	    VideoPlay();
	},{ deep: true });
	onMounted(() => {
		VideoPlay();
	})
</script>

<style>
</style>