关于调用萤石云ezuikit-js的视频对象销毁

相信能看到我这篇文章的都是被折磨的不成样子的同学，我只用一行代码就能解决这个问题。

document.getElementById('video-container1').innerHTML= "";

萤石云只提供了一个stop，是不提供页面对象的销毁的，这时候就只能靠我们自己手动去清空页面了。

往往这种问题都发生在并发量不够，需要写分页，单页面的视频却越来越多的情况。

上全代码：

<template>
	<div id="building">
		  <el-select v-model="pageValue" placeholder="请选择" style="position: absolute;top: 1.25rem;left: 1.25rem;"
		   @change="changePage(pageValue,pageValue+1,pageValue+2)">
		    <el-option
		      v-for="item in options"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value">
		    </el-option>
		  </el-select>

		<div id="video-container1" style="float: left; margin-left:10rem; margin-top:10rem;z-index: 0;
		  border: #00C7E1 solid 0.5rem;border-top: #00FFCF solid 0.5rem;border-bottom: #00FFCF solid 0.5rem;">
		</div>
		<div id="video-container2" style="float: left; margin-left:10rem; margin-top:10rem;z-index: 0;
		  border: #00C7E1 solid 0.5rem;border-top: #00FFCF solid 0.5rem;border-bottom: #00FFCF solid 0.5rem;">
		</div>
		<div id="video-container3" style="float: left; margin-left:10rem; margin-top:10rem;z-index: 0;
		  border: #00C7E1 solid 0.5rem;border-top: #00FFCF solid 0.5rem;border-bottom: #00FFCF solid 0.5rem;">
		</div>
	</div>

</template>
<script>
	import EZUIKit from 'ezuikit-js';
	export default {
		name: 'home',
		components: {},
		created() {
			setTimeout(() => {
				this.play(1,2,3)
			}, 1000);
		},
		data() {
			return {
			    pageValue:1,
				player1:null,
				player2:null,
				player3:null,
				num1:0,
				num2:0,
				num3:0,
				options: [{
				         value: 1,
				         label: '第一页'
				       }, {
				         value: 4,
				         label: '第二页'
				       }, {
				         value: 7,
				         label: '第三页'
				       }, {
				         value: 10,
				         label: '第四页'
				       }, {
				         value: 13,
				         label: '第五页'
				       }],
			};
		},
		methods:{
			play(num1,num2,num3){
				this.player1 = new EZUIKit.EZUIKitPlayer({
					id: 'video-container1',
					accessToken: '',
					url: '',
					template: 'security',
					width:400,
					height:400
				});
				this.player1.play();
				this.player2 = new EZUIKit.EZUIKitPlayer({
					id: 'video-container2',
					accessToken: '',
					url: '',
					template: 'security',
					width: 400,
					height: 400
				});
				this.player2.play();
				this.player3 = new EZUIKit.EZUIKitPlayer({
					id: 'video-container3',
					accessToken: '',
					url: '',
					template: 'security',
					width:400,
					height:400
				});
				this.player3.play();
			},
			changePage(num1,num2,num3){
				document.getElementById('video-container1').innerHTML= "";
				document.getElementById('video-container2').innerHTML= "";
				document.getElementById('video-container3').innerHTML= "";
				this.play(num1,num2,num3);
			}
		},
	}
</script>
<style scoped>
	#building {
		background: url("../../../public/img/mon/ZGBJ.png");
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 90% 90%;
	}

	.dragList {
		overflow: auto;
	}

	.item {
		cursor: move;
		float: left;
		background: #fff;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		margin: 0 15px 15px 0;
		border: 1px solid #e6e6e6;
	}

	.dragList .sortable-ghost {
		opacity: 0.5;
	}
</style>