uniapp(全端兼容) - 最新详细禁用video视频组件的拖动快进快退功能，禁止视频播放组件video拖曳改变视频进度，uni-app如何不让视频播放器手动快进和快退（可保证用户完整观看完视频）

最新推荐文章于 2024-06-08 07:15:00 发布
最新推荐文章于 2024-06-08 07:15:00 发布
阅读量3.2k 收藏 4
点赞数 3
分类专栏： 前端常见问题解决 文章标签： uni-app video 视频播放器 保证完整观看完视频 禁止视频快进快退 防止人为拖动进度条 限制必须观看完整个视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/137606165
版权
前端常见问题解决 专栏收录该内容
108 篇文章 118 订阅 ¥9.90 ¥99.00
订阅专栏

功能描述

在uniapp小程序/h5网页网站/安卓苹果app/nvue等（全平台完美兼容）开发中，详细实现Video视频组件禁止用户快进和快退，屏蔽禁用屏幕拖拽进行快退和快进功能（禁止用户拖动视频进度条），强制让用户从0-100完整观看完视频允许中途快进，适用于uni-app官方video视频组件，也支持uview等第三方视频组件，强效禁用！

很多教程都无效，本博客可完美保证用户完整观看视频！

在这里插入图片描述

示例代码

先来说一下思路，首先

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
h5，video禁止拖动进度条，禁止快进
03-24
利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频播放只有这么一个要求，所以搞得比较简单。代码仅作参考。大神轻喷。
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
Uniapp 平台兼容性 全端支持 引入组件即可
vue3 video 视频播放时禁止拖动进度条
最新发布
weixin_42498594的博客
06-08 612
视频第一次观看不支持快进，已观看过的内容重复观看支持快进。视频页面：有视频当前状态，未观看的视频为待学习状态，观看完一次都是已完成的状态。
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
09-26
引入组件即可 <template> <TC-choujiang></TC-choujiang> </template> 里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。 商品图片可以从数据库中获取进行赋值即可 位置：uni_modules/TC-choujiang/components/TC-choujiang/TC-choujiang
uniapp 中video标签视频禁止快，拖拽快进
weixin_41463944的博客
04-17 576
uniapp 中video标签视频禁止快，拖拽快进
uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进
weixin_49577940的博客
07-30 9522
之前写了一篇文章 , 禁止快进的 , 但刚刚发现在uni-app中实现不了 , 所以又上网找别的方法,话不多说, 上代码 一 , template中 <video id="myVideo" @timeupdate="timeUpdate" src="@/static/vlog.mp4" initial-time="initial_time" class="video-item"></video> 二 , script中 data() { return ...
video禁止拖拽进度条(uni-app)
小白菜的博客
03-04 4780
需求： 用户不可以快进视频，但是看过的就可以快进 解决思路描述： 这里使用了UNI中video组件，该组件中有@timeupdate方法播放进度变化时触发。 用户拖拽进度条的时候一定会触发，通过对进度条变化的大小可以得到是自然播放还是用户操作，
uniapp video组件禁止进度条拖动实现完整代码
a_靖的博客
05-17 4704
2.视频播放完成后触发奖励。1.禁止拖动进度条快进。
uniapp实现禁止video拖拽快进
weixin_48596030的博客
06-11 2665
在项目开发过程中，难免会用到video视频标签。根据客户要求，视频只能正常观看完，不能手动快进，以下是实现的方法：
uniapp实现video禁止拖拽快进功能
weixin_45389051的博客
09-20 6481
开发中可能会遇到一个视频，不能让你拖拽，必须看完的功能… 不说废话，具体怎么实现呢？ 首先一个video标签 <video id="myVideo" @timeupdate="timeUpdate" :src="url" initial-time="initial_time" > data部分 data(){ return{ url: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=302802010
videojs视频可拖动播放与不可拖动播放
12-22
videojs视频可拖动播放与不可拖动播放
仿抖音短视频小程序APP开源前后端源码，UNIAPP前端即时通讯源码学习分享前端下载源码
05-26
这类源码通常包含了完整的短视频平台功能，如视频录制、编辑、上传、播放、点赞、评论等，同时还具备用户管理、权限控制、数据统计等后端功能。对于想要快速搭建一个短视频平台的开发者来说，这类源码无疑是一个极好...
Uniapp swiper 滚动图组件
09-10
【标题】"Uniapp swiper 滚动图组件"是一个基于Vue.js开发的全端兼容的前端组件，专为在不同平台（如iOS、Android、H5等）上实现滑动轮播效果而设计。它提供了丰富的功能和高度的自定义性，使得开发者能够轻松地在...
uniapp全端《智能取名》源码
09-03
【uniapp全端《智能取名》源码】是一个基于uniapp框架开发的应用，它能够帮助用户快速地为孩子、项目或任何需要命名的事物进行智能取名。这个应用的核心功能包括生成名字建议、对名字进行评分以及提供名字的解释。...
uniapp实现无法快进的视频
精通前端技术，了解后端接口
12-10 606
【代码】uniapp实现无法快进的视频。
微信小程序video组件/腾讯视频插件，禁止拖动进度条，使用遮罩层的方式实现
mrcaoyongkang的博客
07-24 2218
微信小程序video组件/腾讯视频插件，禁止拖动进度条，使用遮罩层的方式实现
video标签播放视频禁止快进
cxws110的博客
06-19 654
// 禁止快进var sym;}, 500);
网页视频进度条禁止拖动----解决
热门推荐
weixin_46435234的博客
03-06 7万+
点击键盘F12键，进入开发者模式 发现标志,html5播放器，属于原生支持最方便实现加速的 在开发者模式中找到Console 调式窗口，输入以下代码 可以设置视频播放速度 /* play video twice as fast */ document.querySelector('video').defaultPlaybackRate = 1.0;//默认一倍速播放 document.querySelector('video').play(); /* now play three times as.
uniapp - 强力覆盖 checkbox 复选框样式兼容全端app
11-11
Uniapp是一个基于Vue.js的跨平台应用开发框架，它强力覆盖了checkbox复选框样式，使得复选框在不同的移动端app上都能有良好的兼容性。 在Uniapp中，开发者可以通过简单的代码实现复选框的样式定制和覆盖。这意味着无论是在iOS、Android还是其他移动平台上，复选框的样式都能够被统一，并且可自定义。这对于开发者来说是非常方便的，他们不需要为不同平台去逐个调整复选框的样式，而是可以直接在Uniapp中进行统一的定制。 另外，Uniapp还支持使用flex布局来布置和调整复选框组件，这使得复选框的样式和布局更加灵活和方便。而且，Uniapp还提供了丰富的组件和插件库，开发者可以根据需要选择合适的组件来实现复选框的样式兼容。 总的来说，Uniapp强力覆盖了checkbox复选框样式，使得复选框在全端app中都能够有良好的兼容性。它提供了灵活的定制和布局方式，同时支持丰富的组件和插件库，使得开发者能够更加便捷地实现复选框样式的兼容。因此，在Uniapp中开发复选框组件，可以获得更好的开发体验和更广泛的应用范围。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值