<template>
	<view>
		<view v-if="show">
			<video-player 
				:url="fileUrl" 
				:name="title" 
				:inittime="initTime"
				:drag="true"
				@play="videoPlay"
				@pause="videoPause"
				@timeupdate="videoPlaying"
				@ended="videoEnd"
				@fullscreenchange="videoScreen">
			</video-player>
		</view>
		<view style="padding-top: 30px;display: flex;justify-content: center;">
			<button type="default" @click="loadVideo()">加载</button>
			<button type="primary" @click="changeSrc()">切换测试</button>
		</view>
		<view>
			<video style="width: 100%;"
				:src="fileUrl"
				:controls="true"
				@fullscreenchange="videoScreen"
			></video>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				show:false,
				fileUrl:'',
				initTime:0,
				title:'',
				author:'',
			}
		},
		mounted() {
			this.loadVideo();
		},
		methods:{
			loadVideo(){
				//this.fileUrl='http://localhost:9090/cdn/upload/course/2022/5/979321410778959872.mp3';
				this.fileUrl='/static/temp/test.mp4';
				this.title='标题内容111';
				this.initTime=40;
				this.show=true;
			},
			changeSrc(){
				this.fileUrl='/static/temp/video.mp4';
				this.title='标题内容221';
				this.initTime=20
			},
			videoPlay(){
				console.log('videoPlay');
			},
			videoEnd(){
				console.log('videoEnd');
			},
			videoPause(){
				console.log('videoPause');
			},
			videoPlaying(){
				console.log('videoPlaying');
			},
			videoScreen(e){
				console.log('全屏',e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xaudio{
		
	}
</style>