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> -->
		<video id="myVideo" @timeupdate="timeUpdate" :src="url" controls initial-time="initial_time" />
		<u-button @click="changeRate">切换</u-button>
		<u-parse :html="details.content" class="f-padding"></u-parse>
	</view>
</template>

<script>
	import Player from 'xgplayer';
	
	export default{
		data(){
			return{
				videoContext: uni.createVideoContext('myVideo', this),
				id:'',
				content:'',
				details:{},
				duration:'',
				url: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
				video_real_time: 0, //实时播放进度
				nitial_time: '', //视频跳转进度 秒
			}
		},
		onLoad(page){
			console.log(page)
			this.id = page.id;
			this.getAdaptTrainOnlineDetails(this.id);
			this.initial_time = '0'
		},
		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)));
				})
			},
			timeUpdate(e) {
				var isReady = 1; // 是否开启可以视频快进 1 禁止开启
				//跳转到指定播放位置 initial-time 时间为秒
				let that = this;
				//播放的总时长
				var duration = e.detail.duration
				//实时播放进度 秒数
				var currentTime = parseInt(e.detail.currentTime)
				//当前视频进度
				// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
				if (that.video_real_time == 0){
					var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time)
				} else {
					var jump_time = parseInt(that.video_real_time)
				}
				if(isReady==1){
					if (currentTime > jump_time && currentTime - jump_time>3){
						let videoContext = wx.createVideoContext('myVideo')
						videoContext.seek(that.video_real_time)
						wx.showToast({
							title: '未完整看完该视频，不能快进',
							icon: 'none',
							duration: 2000,
						})
					}
				}
			 that.video_real_time = currentTime //实时播放进度
			},
			changeRate() {
				this.videoContext.playbackRate(2.0)
			}
		}
	}
</script>

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