<!--
 * @Author: your name
 * @Date: 2020-08-28 15:20:15
 * @LastEditTime: 2020-10-10 17:19:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
-->
<template>
	<div class="video-container">
		<div class="info">JSMPEG播放器示例</div>
		<div class="video-box">
			<canvas class="video" ref="canvas"></canvas>
			<div class="play-icon" @click="playVideo">
				<span class="iconfont">&#xe608;</span>
			</div>
		</div>
	</div>
</template>
<script>
// @ is an alias to /src
import jsmpeg from "jsmpeg";
import gsap from "gsap";

export default {
	name: "Index",
	components: {},
	mounted() {
		this.initVideo();
	},
	methods: {
		initVideo() {
			this.player = new jsmpeg("//cdn.szxgl.cn/scl/download/out.ts", {
				canvas: this.$refs.canvas,
				autoplay: false,
				audio: true,
				throttled: false,
				loop: false,
				onSourceCompleted: () => {
					console.log("Source Completed");
				},
			});
		},
		playVideo(e) {
			this.player.play();
			gsap.to(e.target, { autoAlpha: 0 });
		},
	},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.video-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	.info {
		text-align: center;
		line-height: 50px;
		font-size: 30px;
		color: #fff;
		margin: 60px auto;
	}
	.video-box {
		.prLayout(95%,auto);
		.video {
			.prLayout(100%,100%);
			border-radius: 30px;
		}

		.play-icon {
			.paLayout(50%,50%,100px,100px,100);
			transform: translate(-50%, -50%);
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			align-items: center;
			cursor: pointer;
			.iconfont {
				font-size: 80px;
			}
		}
	}
}
</style>