<!--ckplayer 视频播放-->
<template>
	<div style="height: 100%">
		<video :id="'videoItem' + name" style="width: 100%; height: 100%; object-fit: fill" controls :autoplay="autoPlay" muted />
	</div>
</template>

<script>
export default {
	props: ["videoUrls", "autoPlay", "poster", "deviceIp", "name"],
	data() {
		return {
			player: "",
			webRtcServer: null
		};
	},
	// watch: {
	// 	name: {
	// 		handler(newName, oldName) {
	// 			console.log(this.videoUrls, this.deviceIp, this.autoPlay, this.name);
	// 			let webRtcServer = null;
	// 			webRtcServer = new WebRtcStreamer("videoItem" + this.name, this.deviceIp);
	// 			webRtcServer.connect(this.videoUrls);
	// 		},
	// 		immediate: true
	// 	}
	// },
	mounted: function () {
		console.log(this.videoUrls, this.deviceIp, this.autoPlay, this.name);
		let webRtcServer = this.webRtcServer;
		webRtcServer = new WebRtcStreamer("videoItem" + this.name, this.deviceIp);
		webRtcServer.connect(this.videoUrls);
	},
	beforeDestroy: function () {
		this.webRtcServer.disconnect();
	},
	methods: {}
};
</script>
