<template>
	<view class="content">
		<view id="demo"></view>
		<div class="time-bt">
			<button @click="start()">播放</button>
			<button @click="stop()">暂停</button>
			当前时间：{{ currentTime || '-' }}
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello',
			tcPlayerId: 'id_test_video',
			fileID: undefined,
			player: null,
			currentTime: 0
		};
	},
	mounted() {
		// 初始化腾讯云播放器
		var that = this;
		uni.request({
			url: 'xxxxxxx',//获取文件fileID
			data: n,
			success: (t) => {
				if (1 == t.data.result) {
					uni.getSystemInfo({
						success: res => {
							that.barHeight = 'padding-top:' + (res.statusBarHeight + 10) + 'px';
							that.windowWidth = res.windowWidth;
							that.windowHeight = res.windowHeight;
							var x = document.createElement("video");
							x.setAttribute("id", "player_id");
							x.setAttribute("width", res.windowWidth);
							x.setAttribute("height", res.windowHeight);
							x.setAttribute("preload", "auto");
							x.setAttribute("poster", '');
							x.setAttribute("x5-video-player-type", "h5");
							x.setAttribute("x5-video-player-fullscreen", true);
							x.setAttribute("show-center-play-btn", false);
							x.setAttribute("x5-playsinline", '');
							x.setAttribute("x5-video-orientation", 'portrait');
							x.setAttribute("playsinline", '');
							x.setAttribute("webkit-playsinline", "auto");
							document.getElementById("demo").appendChild(x);
							console.log(x)
							var player = TCPlayer('player_id', {
								fileID: 'xxxxxx',//通过请求获取的fileID
								appID: '0123456789',
								autoplay: true,
								controls: false,
								loop: true,
								plugins: {
									ContinuePlay: { // 开启续播功能
										auto: true, //[可选] 是否在视频播放后自动续播
										text: '上次播放至', //[可选] 提示文案
										btnText: '恢复播放' //[可选] 按钮文案
									},
								}
							})
							that.player = player;
						}
					});
				} 
			}
		});
		
	},
	methods: {
		start() {
			this.player.play();
		},
		stop() {
			this.player.pause();
		},
		jump() {
			this.seek(this.seekTime);
		},
		seek(s) {
			this.player.currentTime(Number(s));
		},
		loop() {
			this.seek(this.startTime);
		}
	}
};
</script>

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

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>