exam/exam-06173-uni - reg/pages/course/video.vue

<template>
	<view v-if="fullUrl && checked">
		<video id="myVideo" style="width: 100%;" :src="fullUrl" 
		@error="videoErrorCallback" 
		@timeupdate="videoUpdate"
		@loadedmetadata="videoLoad"
		@play="play = true"
		@pause="play = false"
		 controls></video>
		<read-socket v-if="fileId && play && pageShow" v-model="fileId" :course-id="courseId" />
		<read-check v-if="fileId && play && pageShow && checkOn" :time-sec="checkSec" @break="checkBreak" />
		<face-check v-if="fileId && play && pageShow"
			:courseId="courseId" 
			:fileId="fileId"
			@ok="pageShow=true"
			@no="pageShow=false"
			>
		</face-check>
	</view>
	<view v-else style="display: flex; align-items: center; height: 30vh; justify-content: center; color: #666;">
		抱歉，该课件暂不支持查看！
	</view>
</template>
<script>
	import { apiCheckFile } from '@/api/course.js'
	import ReadSocket from './components/ReadSocket'
	import ReadCheck from './components/ReadCheck'
	import FaceCheck from './components/FaceCheck'
	export default {
		components: {
			ReadSocket, ReadCheck, FaceCheck
		},
		data() {
			return {
				checked: false,
				courseId: null,
				fileId: null,
				checkOn: false,
				checkSec: 0,
				// 完整预览路径
				fullUrl: null,
				extraProps: {
					src: this.fullUrl,
					controls: true
				},
				// 是否允许拖动
				play: false,
				videoContext: null,
				drag: true,
				pageShow: true,
				lastPlay: 0
			}
		},
		onLoad: function(option) {
			
			this.courseId = option.courseId
			this.fileId = option.fileId
			this.drag = option.drag
			if(option.checkOn && option.checkOn==='true'){
				this.checkOn = true
			}
			
			if(option.checkSec){
				this.checkSec = parseInt(option.checkSec)
			}

			apiCheckFile({courseId: this.courseId, fileId: this.fileId}).then(data=>{
				this.checked = data
				
				if(this.checked){
					const path = decodeURIComponent(option.path)
					this.fillData(path)
					
					console.log('文件地址：', this.fullUrl)
				}
			})
		},
		
		onHide: function(){
			// 程序隐藏
			this.pageShow = false
			this.videoContext.pause()
		},
		onShow:function(){
			this.pageShow = true
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},

		methods: {

			// 填充微信或APP地址
			fillData(path) {
				if (path.startsWith('https://') || path.startsWith('http://')) {
					this.fullUrl = path
				} else {
					this.fullUrl = `${this.$urls.api}${path}`;
				}
			},

			videoErrorCallback(e) {
				uni.showModal({
					content: '出现错误：' + e.target.errMsg,
					showCancel: false
				})
				console.log(e.target.errMsg)
			},
			
			
			videoLoad(e){
				
				// 视频总长度
				const lastTime = uni.getStorageSync(this.fileId);
				
				// 记忆上次播放，太短也没必要记忆
				if (lastTime != null && lastTime > 5) {
					this.lastPlay = lastTime
					this.videoContext.seek(lastTime)
				}
			},
			
			videoUpdate(e){

				const curTime = e.detail.currentTime
				const end = e.detail.duration - curTime

				// 播完了，直接跳到开始
				if (end < 1) {
					this.lastPlay = 0
					return
				}

				// 不能快进也不能后退
				if (this.drag && (curTime - this.lastPlay > 2 || this.lastPlay - curTime > 2)) {
					this.videoContext.seek(this.lastPlay)
					return
				}

				if (curTime > 0) {
					uni.setStorageSync(this.fileId, curTime);
				}

				this.lastPlay = curTime
			},
			
			// 验证
			checkBreak(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}

	}
</script>


<style>
	.tips{
		width: 100%;
		text-align: center;
		margin-top: 50px;
		font-size: 12px;
	}
</style>