思路：
- 每次进入视频播放页面获取视频的总长度提交至后台（使用video标签中的 loadedmetadata 方法可以获取到，下面代码有使用，这个是作为提供给后台存数据库作为播放百分比的，不需要的可以忽略）
- 每次进入视频页面还需要加载上一次视频中已经播放到的位置进行直接跳转，这个部分数据来源于上一次播放提交至后台的记录（此处可以使用video的 initial-time 属性，可以直接指定到某一秒）
- 每次跳转到的时间需要和已经学习完成的时间进行比较，如果大于已学习完成时间，则无法跳转，进行提示
vue：
<video
class="video-control"
id="myVideo"
@timeupdate="timeUpdate"
:src="videoInfo.videoUrl"
controls
:initial-time="initial_time"
object-fit="fill"
play-btn-position="center"
@ended="ended"
@tap="videoClick"
@loadedmetadata="loadedmetadata"
>
</video>
js：
export default {
data() {
return {
videoContext: uni.createVideoContext('myVideo', this),
videoInfo: {},
videoIndex: 0,
// 视频实时时间
initial_time: 0,
// 视频已经播放时间
playedTime: 0,
// 视频实际时间
video_real_time: 0,
// 视频选中时间
currentDuration: 0,
// 视频总时长
duration: 0,
};
},
beforeDestroy() {
// 页面销毁提交已经播放时间
},
methods: {
/**
* 获取视频总时长
* @param {Object} data
*/
loadedmetadata(data) {
this.duration = data.detail.duration;
},
/**
* 视频点击
* @param {Object} e
*/
videoClick(e) {
},
/**
* 视频停止
* @param {Object} e
*/
pause(e) {
// 记录视频已经学完
console.log(e);
},
/**
* 控制视频不能快进
* @param {Object} e
*/
timeUpdate(e) {
//播放的总时长
let duration = e.detail.duration;
//实时播放进度 秒数
let jumpTime = parseInt(e.detail.currentTime);
//当前视频进度
if (jumpTime - this.playedTime > 3) {
// 差别过大，调用seek方法跳转到实际观看时间
this.videoContext.seek(this.playedTime);
wx.showToast({
title: '未完整看完该视频，不能快进',
icon: 'none',
duration: 2000
});
} else {
this.video_real_time = parseInt(e.detail.currentTime);
if (this.video_real_time > this.playedTime) {
this.playedTime = this.video_real_time;
}
}
// 此处判断视频已播放完成，提交视频进度提供给后台，视频停止
if (parseInt(this.duration) !== 0 && parseInt(this.duration) === parseInt(this.video_real_time)) {
this.videoContext.pause();
}
},
/**
* 视频结束
*/
ended() {
// 用户把进度条拉到最后，但是实际观看时间不够，跳转回去会自动暂停。
// 这里加个判断。
if (this.playedTime < this.duration) {
this.videoContext.play();
// 提交视频进度提供给后台
}
},
}
};
Attention：这里只提供了视频标签会使用到的方法，具体情况需要自己去处理，希望能帮到大家！！！
标签：uniapp,视频,跳转,video,time,duration,播放 From： https://www.cnblogs.com/zaijin-yang/p/16805026.html