veterans_H5/h5_web/pages/basicTraining/basicTrainingDetails/basicTrainingDetails.vue

<template>
	<view>
		<!-- <video id="vid"><source :src="details.videoUrl"></video> -->
		<!-- <video width="320" height="240" controls="controls" preload="auto">
		  <source src="static/img/11111.mp4" type="video/mp4">
		您的浏览器不支持Video标签。
		</video> -->
		<!-- <video @timeupdate="updateTime" @canplay="getDuration" ref="video111" :src="details.videoUrl" controls="controls" preload="auto"></video> -->
		<view id="player" style="width: 100%;"></view>
		<u-parse :html="details.content" class="f-padding"></u-parse>
	</view>
</template>

<script>
	import Player from 'xgplayer';
	
	export default{
		data(){
			return{
				id:'',
				content:'',
				details:{},
				duration:'',
			}
		},
		onLoad(page){
			console.log(page)
			this.id = page.id;
			this.getAdaptTrainOnlineDetails(this.id);
		},
		onShow(){
			
		},
		methods:{
			getAdaptTrainOnlineDetails(id){
				this.$u.api.getAdaptTrainOnlineDetails({id:id}).then(res=>{
					this.details = res.data;
					let player = new Player({
					  id: 'player',
					  autoplay: false,
					  playsinline: true,
					  url: this.details.videoUrl,
					  screenShot: true,
					  fluid: true,
					  videoInit: true,
					  enableVideoDbltouch: true,
					});
					player.once('ended',()=>{
						this.upAdaptTrainOnlineInfo();
					});
					player.once('canplay',(e)=>{
						console.log('canplay',player.duration)
						this.duration = player.duration;
					});
					player.on('timeupdate',()=>{
						let that = this;
						// console.log('that',that);
						// console.log('currentTime',player.currentTime);
						// // setInterval(that.aaa+=1,1000)
						// console.log('that.aaa',that.aaa);
					  //事件名称可以在上述查询
					});
					console.log('getAdaptTrainOnline',JSON.parse(JSON.stringify(res)));
				})
			},
			upAdaptTrainOnlineInfo(){
				let params ={
					tabId:this.details.id,
					adaptName:this.details.adaptName,
					url:this.details.videoUrl,
					type:this.details.videoType,
					duration:this.duration,
					playDuration:this.duration,
				}
				this.$u.api.upAdaptTrainOnlineInfo(params).then(res=>{
					this.rate = res.data;
					console.log('upAdaptTrainOnlineInfo',JSON.parse(JSON.stringify(res)));
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	#player{margin-bottom: 24rpx;}
	// @import  './basicTrainingDetails.scss'
</style>