video标签播放视频禁止快进

最新推荐文章于 2024-08-14 09:02:55 发布
最新推荐文章于 2024-08-14 09:02:55 发布
阅读量722 收藏
点赞数
文章标签： 音视频 java 数学建模
原文链接：https://blog.csdn.net/weixin_49577940/article/details/118720678
版权

<body>
  <video src="./vlog.mp4" muted controls loop poster=""></video>
</body>
<script>
  // 禁止快进
  var sym;
  var video = document.querySelector("video")
  setInterval(function () {
    var time = video.currentTime
    if (time - sym > 1) {
      video.currentTime = sym
 
    }
    sym = video.currentTime
  }, 500);
</script>

唱响星河
关注
uniapp(全端兼容) - 最新详细禁用video视频组件的拖动快进快退功能，禁止视频播放组件video拖曳改变视频进度，uni-app如何不让视频播放器手动快进和快退（可保证用户完整观看完视频）
高级前端工程师
04-10 3743
uniapp，h5网页，安卓苹果app，nvue，微信小程序，支付宝小程序，video，视频播放器，视频，视频组件，如何禁用快进和快退，uniapp视频组件怎么禁止用户拖动进度条，uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进，uniapp视频播放器，uniapp视频播放防止用户快进，uni-app视频禁止快进，uniapp如何让视频无法快进，uniapp video禁止快进，uniapp video视频未播放完成禁止拖拽进度条快进，uni小程序video视频禁止拖动进度条新，uniAp
uniapp实现禁止video拖拽快进
weixin_48596030的博客
06-11 2839
在项目开发过程中，难免会用到video视频标签。根据客户要求，视频只能正常观看完，不能手动快进，以下是实现的方法：
h5，video禁止拖动进度条，禁止快进
03-24
利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频播放只有这么一个要求，所以搞得比较简单。代码仅作参考。大神轻喷。
js禁止用户通过video标签自带的进度条进行快进（包括键盘方向键快进），允许快退，下次播放时从上次观看时长继续播放。
什么当当当啊？
12-22 2876
VUE 中禁止用户通过video标签自带的进度条进行快进（包括键盘方向键快进），允许快退，下次播放时从上次观看时长继续播放。
html5的video播放器标签音量大小、快进、播放等控制
阿酷tony
08-14 370
html5的video播放器标签音量大小、快进、播放等控制，Video标签的属性，方法和事件汇总
uniapp 中video标签视频禁止快，拖拽快进
weixin_41463944的博客
04-17 1063
uniapp 中video标签视频禁止快，拖拽快进
video视频禁止快进，禁止倍速
peppa_pig的博客
06-26 964
【代码】video视频禁止快进，禁止倍速。
video视频标签怎么禁止用户拖动进度条快进
weixin_49577940的博客
07-14 4677
昨天经理给我一个需求 , 让我查一下h5播放视频怎么禁止用户快进, 然后刚刚搜了下, 实现了出来,代码如下 , 效果就是我点进度条想快进的话 , 会强制退回去, 这样用户就不能快进了 <body> <video src="./vlog.mp4" muted controls loop poster=""></video> </body> <script> // 禁止快进 var sym; var video = docu...
H5（html5 video）视频播放禁止拖动进度条，不能快进，不能后退；微信公众号视频播放；Java视频流播放
01-16
H5（html5 video）视频播放禁止拖动进度条，不能快进，不能后退；微信公众号视频播放，视频播放后才能操作其他内容。 内含Java视频流播放，本人并不建议直接将视频路径放到src中，而是使用视频流方式获取
video.js 实现视频只能后退不能快进的思路详解
12-04
总结来说，通过监听和处理video.js的`mouseup`和`timeupdate`事件，我们可以有效地控制视频只能向后播放而不能快进。这种方法灵活且可定制，适用于那些希望限制用户快进但允许回看的场景。希望这个解释对理解video....
uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进
weixin_49577940的博客
07-30 9831
之前写了一篇文章 , 禁止快进的 , 但刚刚发现在uni-app中实现不了 , 所以又上网找别的方法,话不多说, 上代码 一 , template中 <video id="myVideo" @timeupdate="timeUpdate" src="@/static/vlog.mp4" initial-time="initial_time" class="video-item"></video> 二 , script中 data() { return ...
uniapp video禁止快进
aichimaodeyuybh的博客
07-26 597
【代码】uniapp video禁止快进。
Video/Audio禁止快进（退）
lijiawei111的博客
04-29 229
　　首先接着上个随笔。上个随笔主要介绍了视频音频的相关操作、属性和方法。这里主要记录一个应用：禁止快进(快退同理)。 　　思路：监听快进事件(此处是监听播放时间更新)，利用一个缓存的时间和播放到的时间进行对比，如果时间大于1秒(保险起见使用2秒，以避免在播放的时刻正好在计时的那一刻的尴尬)，则表明是快播，给其重置回播放时间即可。 　　代码： 1 <video 2 id="ki...
uni-app的video禁止快进及seek()上的小坑
Anchor
04-04 9824
最近项目做的uniapp，一个需求，要求播放的视频不可以快进。 首先想到可以隐藏video进度条以及禁止手势控制 查看uniapp官方文档https://uniapp.dcloud.io/component/video，可知show-progress可以控制进度条的隐藏（但是要注意后面的注释，若是不设置宽度大于240的时候才会显示，我一开始一直都是小屏播放发现即使设置了属性为false还是一...
Vue 实现 H5video 视频标签 禁止快进 最优
^_^
09-07 2519
可以拖动滚动条 但是还是松开鼠标还是停留在当前位置，如果后退的话还是可以快进到最快的位置，这点还是比较优化较好的 <template> <video ref="video" @timeupdate="timeupdate" > </template> <script> export default { data() { return { currTime: null,.
uniapp实现video禁止拖拽快进功能
weixin_45389051的博客
09-20 6581
开发中可能会遇到一个视频，不能让你拖拽，必须看完的功能… 不说废话，具体怎么实现呢？ 首先一个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
js控制video控件禁止快进 但可以后退
weixin_47264982的博客
08-12 905
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
blob写法的浏览器兼容性
阿酷tony
07-12 1339
blob写法的浏览器兼容性： 我的视频应用类原创文章 酷播云免费视频二维码的完整使用教程（适合小企业做微信视频宣传） 视频二维码的适用场景 微信公众号直播有哪些不一样的玩法？ 微信视频直播如何做收费直播（如何做付费的微信直播）图文教程 说说视频编码格式、视频码率、视频帧率、分辨率的概念 原创教程：带ppt课件和讲师画面的教学视频录制完整教程 如何做电视节目的视频直播（电视台节目直播） 做视频直播时如何测试本地网络的上行带宽(网速测试) usb摄像头做教学直播实现pc和手机都可以..
vue 中video.js插件视频播放禁止快进
最新发布
09-07
Vue 中使用 video.js 插件来嵌入和控制视频播放器时，可以通过配置 video.js 的选项来实现禁止视频快进的功能。以下是如何操作的基本步骤： 1. 在你的 Vue 组件中引入 video.js 库。 2. 在模板中添加 video.js 的视频元素。 3. 在组件的脚本部分设置 video.js 的初始化，并配置 `controlBar` 选项，尤其是 `playToggle` 和 `progressControl`，以隐藏或禁用快进等特定的控制功能。 下面是一个简单的示例代码： ```javascript <template> <div> <video ref="video" class="video-js vjs-default-skin"></video> </div> </template> <script> import 'video.js/dist/video-js.css'; export default { name: 'VideoPlayer', mounted() { this.initVideoPlayer(); }, methods: { initVideoPlayer() { const videoElement = this.$refs.video; const options = { controls: true, controlBar: { // 禁用快进按钮 progressControl: { timeJumpButtons: false } }, // 其他配置... }; this.player = videojs(videoElement, options); } }, beforeDestroy() { if (this.player) { this.player.dispose(); // 清理资源 } } }; </script> <style> /* 确保你的样式可以适应视频播放器 */ </style> ``` 在上面的代码中，`controlBar.progressControl.timeJumpButtons` 设置为 `false` 禁用了快进和快退按钮。这样，用户就无法通过点击进度条的两端来快进或快退视频。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值