uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进

之前写了一篇文章 , 禁止快进的 , 但刚刚发现在uni-app中实现不了 , 所以又上网找别的方法,话不多说, 上代码一 , template中<video id="myVideo" @timeupdate="timeUpdate" src="@/static/vlog.mp4" initial-time="initial_time" class="video-item"></

调调啊

9119人浏览 · 2021-07-30 16:41:15

调调啊 · 2021-07-30 16:41:15 发布

之前写了一篇文章 , 禁止快进的 , 但刚刚发现在uni-app中实现不了 , 所以又上网找别的方法,话不多说, 上代码

一 , template中

<video id="myVideo" @timeupdate="timeUpdate" src="@/static/vlog.mp4" initial-time="initial_time" ></video>

二 , script中

data() {
		return {
			video_real_time: 0,
			nitial_time: ''
		};
	},

	methods: {
		// 禁止拖动进度条快进
		timeUpdate: function(e) {
			var isReady = 1; // 是否开启可以视频快进 1 禁止开启
			//跳转到指定播放位置 initial-time 时间为秒
			let that = this;
			//播放的总时长
			var duration = e.detail.duration;
			//实时播放进度 秒数
			var currentTime = parseInt(e.detail.currentTime);
			//当前视频进度
			// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
			if (that.video_real_time == 0) {
				var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
			} else {
				var jump_time = parseInt(that.video_real_time);
			}
			if (isReady == 1) {
				if (currentTime > jump_time && currentTime - jump_time > 3) {
					let videoContext = wx.createVideoContext('myVideo');
					videoContext.seek(that.video_real_time);
					wx.showToast({
						title: '未完整看完该视频，不能快进',
						icon: 'none',
						duration: 2000
					});
				}
			}
			that.video_real_time = currentTime; //实时播放进度
		}
	}