javascript
复制代码
<template>
<view>
<!-- id:唯一标识，@timeupdate进度条变化的事件，@ended进度条到最后的事件，initial-time指定视频初始播放位置， -->
<video id="myVideo" style="width: 100%;" @timeupdate="timeUpdate" @ended="ended" :initial-time="initialTime"
:src="course.videos" :poster="course.img">
</video>
</view>
</template>
<script>
export default {
data() {
return {
initialTime: 0, //初始播放位置
duration: 0, // 视频时长
videoContext: '', // 用来存储video对象
watchTime: 0, // 实际观看时间
videoRealTime: 0, // 实时播放进度
course: {
videos: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%[email protected]",
img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
}
};
},
onLoad(options) {
uni.setNavigationBarTitle({
title: options.id
})
// 调用接口取到该用户上次播放的位置（秒）
this.watchTime = 67
this.initialTime = 67
},
onReady() {
// 视频唯一ID
this.videoContext = uni.createVideoContext('myVideo')
},
methods: {
// 监听进度条变化：禁止拖动 e.detail = {currentTime, duration} 。触发频率 250ms 一次
timeUpdate(e) {
//视频时长
this.duration = parseInt(e.detail.duration)
// 记录用户当前视频进度
var jumpTime = parseInt(e.detail.currentTime)
// 判断用户当前视频进度比实际观看时间差别，这里只判断了用户快进
if (jumpTime - this.watchTime > 1) {
// 差别过大，调用seek方法跳转到实际观看时间
this.videoContext.seek(this.watchTime)
} else {
this.videoRealTime = parseInt(e.detail.currentTime)
if (this.videoRealTime > this.watchTime) {
this.watchTime = this.videoRealTime
}
}
},
ended() {
// 用户把进度条拉到最后，但是实际观看时间不够，跳转回去会自动暂停
if (this.watchTime < this.duration) {
this.videoContext.play()
} else {
console.log('看完了')
}
},
// 监听返回：监听不了ios的左滑返回，目前的采用的解决方案是在onLoad设置禁用左滑
// onLoad(option) {
// // 单页禁止测滑返回
// // #ifdef APP-PLUS
// let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
// currentWebview.setStyle({
// popGesture: 'none'
// })
// // #endif
// }
// 监听返回，记录视频的观看时长
onBackPress(e) {
//backbutton 是点击物理按键返回，navigateBack是uniapp中的返回（比如左上角的返回箭头）
console.log('返回', e, this.watchTime, this.duration);
},
},
}
</script>