150 lines
3.2 KiB
Vue
150 lines
3.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="nav-bar"></view>
|
|
<view class="video-area">
|
|
<video
|
|
id="video"
|
|
@pause="videoPause"
|
|
@play="videoPlay"
|
|
:src="videoUrl"
|
|
@timeupdate="videoTime"
|
|
:show-progress="false"
|
|
:enable-progress-gesture="false"
|
|
:initial-time="initTime"
|
|
autoplay
|
|
></video>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { publicPath } from '../../public';
|
|
export default {
|
|
data() {
|
|
return {
|
|
videoUrl: '',
|
|
watchTime: '',
|
|
watchTimeHr: '',
|
|
videoDuration: '',
|
|
noticeId: '',
|
|
materialsId: '',
|
|
initTime: '',
|
|
rate: '',
|
|
durationWhenInit: '',
|
|
timeout1: null,
|
|
timeout2: null,
|
|
videoPlayStatus: 0
|
|
}
|
|
},
|
|
methods: {
|
|
videoTime (e) {
|
|
// console.log(e);
|
|
this.watchTime = e.detail.currentTime
|
|
this.watchTimeHr = e.detail.currentTime / 3600
|
|
this.videoDuration = e.detail.duration
|
|
this.rate = Math.round((this.watchTime / this.videoDuration) * 100)
|
|
},
|
|
uploadWatchTime () {
|
|
let that = this
|
|
uni.request({
|
|
url: publicPath + '/backstage/app/updateMaterialsRate',
|
|
method: 'POST',
|
|
header: {
|
|
'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
|
|
},
|
|
data: {
|
|
noticeId: that.noticeId,
|
|
materialsId: that.materialsId,
|
|
userId: uni.getStorageSync('id'),
|
|
compRate: that.rate,
|
|
watchLong: that.watchTimeHr
|
|
},
|
|
success: (res) => {
|
|
console.log(res);
|
|
}
|
|
})
|
|
},
|
|
videoPause () {
|
|
console.log(this.rate);
|
|
this.uploadWatchTime()
|
|
|
|
},
|
|
videoPlay () {
|
|
|
|
}
|
|
},
|
|
onLoad(params) {
|
|
console.log(params);
|
|
this.videoUrl = params.url
|
|
this.noticeId = params.noticeId
|
|
this.materialsId = params.materialsId
|
|
this.initTime = Math.round(params.watchLong * 60 * 60)
|
|
this.durationWhenInit = Math.round(params.duration * 60)
|
|
console.log(this.initTime);
|
|
},
|
|
onBackPress() {
|
|
console.log(this.rate);
|
|
this.videoPlayStatus = 1
|
|
this.uploadWatchTime()
|
|
},
|
|
onShow() {
|
|
console.log(this.durationWhenInit);
|
|
let that = this
|
|
let videoEle = uni.createVideoContext('video')
|
|
this.timeout1 = setTimeout(() => {
|
|
if (that.videoPlayStatus == 0) {
|
|
videoEle.pause()
|
|
uni.showModal({
|
|
title: '继续视频',
|
|
content: '点击确定以继续观看视频',
|
|
showCancel: false,
|
|
confirmText: '确定',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
videoEle.play()
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
console.log(1);
|
|
}
|
|
}, (this.durationWhenInit / 3) * 1000)
|
|
this.timeout2 = setTimeout(() => {
|
|
if (that.videoPlayStatus == 0) {
|
|
videoEle.pause()
|
|
uni.showModal({
|
|
title: '继续视频',
|
|
content: '点击确定以继续观看视频',
|
|
showCancel: false,
|
|
confirmText: '确定',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
videoEle.play()
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
console.log(2);
|
|
}
|
|
}, (this.durationWhenInit / 3) * 1000 * 2)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav-bar{
|
|
width: 100%;
|
|
height: var(--status-bar-height);
|
|
padding-top: var(--status-bar-height);
|
|
}
|
|
.video-area{
|
|
width: 95%;
|
|
height: 400rpx;
|
|
margin: 20rpx auto;
|
|
video{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|