vue-video-player 如何禁止拖动进度条

原创已于 2022-01-29 09:43:39 修改 · 4.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2021-11-09 15:02:00 首次发布

这篇博客分享了如何通过CSS样式禁止Vue-video-player组件的进度条拖动，提供两种实现方式，轻松应对项目需求。

vue-video-player 如何禁止拖动进度条

最近做项目遇到视频播放功能，需求是禁止拖动进度条，找了好久终于找到了，非常简单就一句css即可，真香…。

 .vjs-progress-control{
    pointer-events: none !important;
 }

用js获取进度条的div，添加不可选中的样式

this.$refs.videoPlayer.$el.firstChild.getElementsByClassName('vjs-control-bar')[0].getElementsByClassName('vjs-progress-control')[0].style.pointerEvents = 'none'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

webCandy

关注关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue-video-player 拖动进度条触发暂停&移动端展示倍速菜单

生如夏花S的博客

09-06

4536

uniapp H5项目内，视频点击暂停需显示蒙层，vue-video-player 拖动进度条和播放结束时会触发暂停，不需要展示，查看源码后，发现DEFAULT_EVENTS不包含拖动事件，可以传入:events=“[‘seeking’,‘seeked’]”项目中视频播放主要在移动端H5，倍速点击无法显示菜单去选择，只能点击倍速按钮一直切换，vue-video-player底层用的。，要去改写PlaybackRateMenuButton。默认的底部按钮样式不符合UI，需要重写。

vue中使用vue-video-player插件播放视频以及 audio播放音频

slom_fxt的博客

08-27

390

vue中使用vue-video-player插件播放视频以及 audio播放音频，使用vue-video-player组件播放视频，视频进度条不能点击不能拖动。点击或者拖动就会重新从头开始播放

4 条评论您还未登录，请先登录后发表或查看评论

4 条评论

浔风 2025.09.04
控制台改一下样式不就完蛋了

AudreyGit 2022.12.14
请问苹果端全屏怎么禁用进度条拖动呢？

前端DD 2021.12.13
请问怎么样才能动态控制呢
- webCandy回复前端DD 2021.12.14
  你可以试试用js添加样式的方法

h5，video禁止拖动进度条，禁止快进

03-24

利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频播放只有这么一个要求，所以搞得比较简单。代码仅作参考。大神轻喷。

vue中实现【 Video视频进度条不能拖动，且能倍速播放】，用vue-video-player插件，封装成组件的方法步骤

最新发布

weixin_49232328的博客

09-29

204

可按照需求在playerOptions组件中进行调试。

vue3 video 视频播放时禁止拖动进度条

weixin_42498594的博客

06-08

4533

视频第一次观看不支持快进，已观看过的内容重复观看支持快进。视频页面：有视频当前状态，未观看的视频为待学习状态，观看完一次都是已完成的状态。

视频如何禁止进度条拖动

qq_40608898的博客

02-25

3751

方法一通过css控制 .vjs-progress-control{ pointer-events: none !important; } 方法二通过js控制（视频组件加载完后才能使用） this.$refs.videoPlayer.$el.firstChild.getElementsByClassName('vjs-control-bar')[0].getElementsByClassName('vjs-progress-control')[0].style.pointerEvents

vue-video-player 拖动进度条报错

05-31

如果你在使用 vue-video-player 时拖动进度条出现错误，可能是因为视频文件没有加载完全。你可以检查一下视频文件是否已经完全加载，并且在拖动进度条之前等待一会儿，确保视频文件已经加载完成。另外，你也可以...

vue-video-player禁止拖拽

03-08

### 如何在 `vue-video-player` 中禁用视频拖拽功能为了实现这一目标，在配置 `video.js` 的选项时可以设置特定参数来控制用户的交互行为。通过自定义 `options` 属性中的 `controls` 和其他相关属性，能够达到...

vue-audio-player 音频播放器

tsqjxy的博客

06-24

6308

Vue 音频播放器组件支持 Vue2 和 Vue3 简单实用通用性高支持进度条拖拽支持 PC 端和移动端完善的文档和示例第一步第二部或者第三步

videojs视频可拖动播放与不可拖动播放

12-22

videojs视频可拖动播放与不可拖动播放

带进度条的播放器（样式可以自定义）

09-11

带进度条的播放器（样式可以自定义），播放按钮和暂停按钮样式自定义 进度条样式自定义

【VUE】使用video标签，禁止用户拖动进度条

Jack, what else can you do besides holding your little darling?

09-18

1850

highlight: a11y-dark <videowebkit-playsinline="true"></video> 使用playsinline属性 webkit-playsinline属性

解决浏览器使用 vue-video-player播放视频不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放

ywp2021的博客

11-14

7975

不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放的问题

vue中使用video标签禁止拖动进度条

weixin_53124862的博客

07-15

3361

开发过程中经常遇到一些出乎意料的事，那就简单的记录一下吧！注意：这里根据需求最大可接受快进的秒数。1.在template模板里。废话不多直接上正题。目前使用的是vue2。

如何在Vue中引入video.js，并如何监听相关事件,禁止拖拽

抗争小青年的博客

09-14

3270

在我写的项目中，用到不可拖拽这个功能，实现方式也有很多，比如使用video.js自带的api实现，但我试了这个方法没有效果。倘若直接使用Video.js时会发现用户操作界面都为英文，那么该如何将其改为中文呢？最近考虑做一个视频播放网站，所以接触video.js会多一些，之前考虑到使用。来实现相关功能，结果发现当前技术已不再支持Flash播放器，无奈采用。至此，vue使用video.js教程结束。，然后将该组件引入页面中。a.引入video.js。a.在组件中引入语言文件。b. 在Vue中使用。

video视频标签怎么禁止用户拖动进度条快进

weixin_49577940的博客

07-14

5118

昨天经理给我一个需求 , 让我查一下h5播放视频怎么禁止用户快进, 然后刚刚搜了下, 实现了出来,代码如下 , 效果就是我点进度条想快进的话 , 会强制退回去, 这样用户就不能快进了 <body> <video src="./vlog.mp4" muted controls loop poster=""></video> </body> <script> // 禁止快进 var sym; var video = docu...

html video 设置进度条不可拖动_vue实战开发017:一个简单的进度条模拟安全检测

weixin_39870155的博客

11-25

411

今天做一个简单的检测进度条模拟，我们在很多平台都可以看到安全进度检测的进度条，实际是对我们的安全设置进行检查，当我们将对应的信息补全之后，就相当于完成了一项任务，其安全系数就会提升，这里我先整个最简单的进度条，下面是演示结果。首先我们来定义HTML，这里我们主要有进度条背景，进度条，分值和检测按钮，这个前台比较简单，当然也可以哪来用，这样的话后台要操作的就比较多了，计算和检测的活都交给了后台，我们...