前言：

該功能分別有三個難點：

1.計算百分比，計算上次播放秒數(shù)

2.如何使視頻無法快進(jìn)

3.如何從上次播放描述開始

首先現(xiàn)在這里熟悉一下如何計算：

1.計算視頻播放的百分比

比如該視頻的總時長為120秒，然后現(xiàn)在播放的時長為12秒，計算當(dāng)前視頻學(xué)習(xí)時長的百分比

let a = 120//總時長
let b = 12//現(xiàn)在播放的時長
let c = b / a * 100//總進(jìn)度  10%

2.計算上次播放視頻的秒數(shù)

比如該視頻的總時長為120秒，當(dāng)前視頻學(xué)習(xí)時長為10%，計算上次播放視頻的秒數(shù)

let a = 120//總時長
let c = 10//百分比
let b = a * (c / 100)//上次播放時長

到這里第一個難題已經(jīng)解決

然后想要獲取上次播放視頻的秒數(shù)最佳方法就是請求接口了

請求接口這一步就省去了，不懂得在評論區(qū)留言

其次、如何讓視頻無法快進(jìn)

上代碼：

html：

<video id="myVideo" :title="data.course_title"  :initial-time="videoContext" style="width: 100%;" :src="data.video_url" controls @timeupdate="videoTimeUpdateEvent"></video>

js：

currentTime: '', //現(xiàn)在的時長
durationTime: '', //總時長
videoContext: 0,
watch: 0, //用來判斷是否快進(jìn)
box: null,//綁定上次文
progress: ''//百分比

            onReady() {
			this.box = uni.createVideoContext('myVideo')
		    },
            videoTimeUpdateEvent(e) {
				this.currentTime = Number(e.detail.currentTime);
				this.durationTime = Number(e.detail.duration);
				if (this.currentTime - this.watch > 10) {
					uni.showToast({
						title: '不能快進(jìn)',
						icon: 'none'
					})
					this.box.seek(this.watch)
					this.videoContext = this.watch
				} else {
					this.watch = this.currentTime
				}
			},

到這里第二個問題就解決了

最后，使視頻從上次播放秒數(shù)開始

                if (e.detail.currentTime <= 1) {
					this.box.seek(e.detail.duration * (this.progress / 100))
					this.videoContext = e.detail.duration * (this.progress / 100)
					this.watch = e.detail.duration * (this.progress / 100)
				} else 

整體代碼如下：

<video id="myVideo" :title="data.course_title"  :initial-time="videoContext" style="width: 100%;" :src="data.video_url" controls @timeupdate="videoTimeUpdateEvent"></video>


currentTime: '', //現(xiàn)在的時長
durationTime: '', //總時長
videoContext: 0,
watch: 0, //用來判斷是否快進(jìn)
box: null,//綁定上次文
progress: ''//百分比


            onReady() {
			this.box = uni.createVideoContext('myVideo')
		    },
            videoTimeUpdateEvent(e) {
				this.currentTime = Number(e.detail.currentTime);
				this.durationTime = Number(e.detail.duration);
                if (e.detail.currentTime <= 1) {
					this.box.seek(e.detail.duration * (this.progress / 100))
					this.videoContext = e.detail.duration * (this.progress / 100)
					this.watch = e.detail.duration * (this.progress / 100)
				} else if (this.currentTime - this.watch > 10) {
					uni.showToast({
						title: '不能快進(jìn)',
						icon: 'none'
					})
					this.box.seek(this.watch)
					this.videoContext = this.watch
				} else {
					this.watch = this.currentTime
				}
			},

到這里就結(jié)束了，最后希望能幫助到大家，謝謝支持！文章來源地址http://www.zghlxwxcb.cn/news/detail-786112.html

到了這里，關(guān)于uniapp計算視頻學(xué)習(xí)進(jìn)程，并且下次回來繼續(xù)播放（不能快進(jìn)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！