做网站那个公司好,东莞市建设局官网,软件开发管理软件,居家养老网站建设在uniapp项目中#xff0c;使用video组件播放视频非常方便。默认情况下#xff0c;视频组件会显示进度条#xff0c;用户可以随意拖动进度条来控制视频播放进度。然而#xff0c;在某些特定场景#xff0c;如在线教育、广告宣传等#xff0c;我们希望禁止用户拖动… 在uniapp项目中使用video组件播放视频非常方便。默认情况下视频组件会显示进度条用户可以随意拖动进度条来控制视频播放进度。然而在某些特定场景如在线教育、广告宣传等我们希望禁止用户拖动进度条以保持内容的连贯性。那么如何实现这一功能呢 上一篇文章给大家介绍了通过隐藏原生进度条然后自定义一个进度条的方式来实现禁止拖拽视频进度的方法。今天给大家介绍另外一种方式通过判断判断用户当前视频进度与实际观看时间的差值来确定用户是否使用了拖拽如果差别过大就将视频跳转到实际观看时间。 以下是具体的实现步骤
实现步骤
1、引入视频组件
首先在页面的.vue文件中引入video组件并设置相关属性。
templateviewvideo idmyVideo :initial-timeinitial_timeshow-progressfalse enable-progress-gesturefalsetimeupdatebindtimeupdateendedended classtop-img:srcmp4Url/video/view
/template
其中 timeupdate是一个事件处理器它用于监听视频播放进度的更新。当视频播放时该事件会周期性地被触发以通知开发者视频当前的播放时间currentTime已经改变。
2、创建视频上下文对象 onLoad((options) {videoContext.value uni.createVideoContext(myVideo)})
3、定义响应式变量并初始化视频观看时间 const video_real_time ref(0) //实际播放进度const initial_time ref(0) //该用户看到的位置const videoTime ref(0) //视频时间长度const videoContext ref() //用来存储video对象const watchTime ref(0) //实际观看时间onShow(() {// 调用接口取到该用户播放的位置秒// 这里的0代指从接口放回的时间watchTime.value 0initial_time.value 0}) 4、在bindtimeupdate事件中判断时间差
const bindtimeupdate (e) {videoTime.value parseInt(e.detail.duration)// 记录用户当前视频进度const jumpTime parseInt(e.detail.currentTime)// 判断用户当前视频进度比实际观看时间差别这里只判断了用户快进if (jumpTime - watchTime.value 3) {// 差别过大调用seek方法跳转到实际观看时间videoContext.value.seek(watchTime.value)videoContext.value.play()} else {video_real_time.value parseInt(e.detail.currentTime)if (video_real_time.value watchTime.value) {watchTime.value video_real_time.value}}}
总结 以上方法主要是通过判断用户当前的视频播放进度jumpTime与之前记录的实际观看时间watchTime.value的差值大于3秒则意味着用户进行了快进操作。如果用户快进了则调用videoContext.value.seek(watchTime.value)方法将视频的播放位置跳转回之前记录的实际观看时间然后调用videoContext.value.play()重新开始播放视频。 希望本文对你有所帮助
