15年软件开发经验 只做源码定制 互联网+定制化解决方案

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

原创设计 定制开发

满足您的个性化需求

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

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

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

uniapp实现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视频禁止拖拽快进功能了

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

梁鹏翱
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部