<template>
	<view class="content">
		<view class="preview" id="video-container" style="width: 100px;height: 100px;background-color: aqua;"></view>
		<!-- <view>
			<button @click="ezuikit.stop">stop</button>
			<button @click="ezuikit.play">play</button>
			<button @click="ezuikit.openSound">openSound</button>
			<button @click="ezuikit.closeSound">closeSound</button>
			<button @click="ezuikit.startSave">startSave</button>
			<button @click="ezuikit.stopSave">stopSave</button>
			<button @click="ezuikit.capturePicture">capturePicture</button>
			<button @click="ezuikit.fullScreen">fullScreen</button>
			<button @click="ezuikit.getOSDTime">getOSDTime</button>
			<button @click="ezuikit.ezopenStartTalk">开始对讲</button>
			<button @click="ezuikit.ezopenStopTalk">结束对讲</button>
			<button @click="ezuikit.destroy">销毁</button>
		</view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				strings: ' '
			}
		},
		methods: {
			
		}
	}
</script>

<script module="ezuikit" lang="renderjs">
	var player = null;
	export default {
		created() {
			// this.initPlayer()
		},
		mounted() {

			if (typeof window.EZUIKit !== 'undefined') {
				this.initPlayer();
			} else {	
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = '/packDetail1/static/ezuikit.js'
				script.onload = this.initPlayer.bind(this)
				document.head.appendChild(script)
			}
		},

		methods: {
			initPlayer() {
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync();
				return
				fetch('https://zy.sxzooh.com/zh-api/applet/ysyun/getYsToken')
				      // .then(response => response.json())
				      .then(res => {
				        var accessToken = res.data.data.ysToken;
				       player = new EZUIKit.EZUIKitPlayer({
				       			id: 'video-container', // 视频容器ID
				       			accessToken: accessToken,
				       			url: `ezopen://open.ys7.com/J27717024/1.hd.live`,
				       			// simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
				       			width: windowWidth,
				       			handleError: () => {
				       				this.$ownerInstance.callMethod('titleErr')
				       			},
				       			fullScreenChangeCallBack: (data) => {
				       				if (data.code === false) {
				       					//退出全屏就竖屏
				       					this.$ownerInstance.callMethod('VerticalScreen')
				       					//这里取巧，因为监听无法在取消全屏之前执行竖屏，这样会导致视频还没有回到原来的位置，所以只能重新在加载一次
				       					setTimeout(() => {
				       						this.initPlayer()
				       					}, 500);
				       				}
				       			}
				       		});
				        window.player = player;
				      });
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.preview {
		background-color: black;
	}
</style>
