15年软件开发经验,只做源码定制!

原创设计定制开发

满足您的个性化需求

当前位置：首页前端开发 uinapp

0 0

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

梁鹏翱| 发布于 2021-11-16 13:58:32| 1780阅读| 0点赞| 0评论

uni app实现video视频禁止拖拽快进功能

一 , 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; //实时播放进度
		}
	}

这样就可以实现video视频禁止拖拽快进功能了