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

已于 2022-01-29 09:43:39 修改
阅读量4k 收藏 11
点赞数 2
文章标签： vue.js javascript 前端
于 2021-11-09 15:02:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webCandy/article/details/121228250
版权

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'
webCandy
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
01-21
最近公司的产品上线，一些高级功能在基础版本中不对用户开发，通过视频的形式展示。 产品开发用的是 vue, 经同事介绍使用了vue-video-player 视频播放插件，通过 demo 案例很快实现了视频播放效果   <video-player class=vjs-custom-skin ref=videoPlayer1 :options=playerOptions :playsinline=true :events=events @play=onPlayerPlay($event) @pause=onPlayerPause($event) @en
vue-video-player.zip
09-09
3. **组件化开发**：Vue-video-player的核心思想是组件化，它将播放器的功能分解为多个可复用的部件，如播放/暂停按钮、进度条、音量控制等。开发者可以根据需要选择和自定义这些部件，实现高度定制化的播放体验。 ...
vue中实现 【 Video视频进度条不能拖动，且能倍速播放 】，用vue-video-player插件，封装成组件的方法步骤
weixin_50450473的博客
12-07 1万+
一、安装vue-video-player 插件 npm install vue-video-player -S 二、引入 1、全局引入，main.js import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VideoPlayer) 2、局部引入 import { vide...
vue3 video 视频播放时禁止拖动进度条
最新发布
weixin_42498594的博客
06-08 612
视频第一次观看不支持快进，已观看过的内容重复观看支持快进。视频页面：有视频当前状态，未观看的视频为待学习状态，观看完一次都是已完成的状态。
如何在Vue中引入video.js，并如何监听相关事件,禁止拖拽
抗争小青年的博客
09-14 2802
在我写的项目中，用到不可拖拽这个功能，实现方式也有很多，比如使用video.js自带的api实现，但我试了这个方法没有效果。倘若直接使用Video.js时会发现用户操作界面都为英文，那么该如何将其改为中文呢？最近考虑做一个视频播放网站，所以接触video.js会多一些，之前考虑到使用。来实现相关功能，结果发现当前技术已不再支持Flash播放器，无奈采用。至此，vue使用video.js教程结束。，然后将该组件引入页面中。a.引入video.js。a.在组件中引入语言文件。b. 在Vue中使用。
vue-video-player 进度条不能调节BUG
aaron9185的博客
08-19 3011
问题：使用vue-video-player组件播放视频，视频进度条不能点击不能拖动。点击或者拖动就会重新从头开始播放。 产生原因： 其实就是没有转成字节流，导致不能选择某个视频点 解决方式 使用nginx进行转发 参考文章：https://blog.csdn.net/weixin_43616097/article/details/106342909 ...
vue中使用video标签禁止拖动进度条
weixin_53124862的博客
07-15 2402
开发过程中经常遇到一些出乎意料的事，那就简单的记录一下吧！注意：这里根据需求最大可接受快进的秒数。1.在template模板里。废话不多直接上正题。目前使用的是vue2。
vue video(视频)禁止用户拖动进度条，自定义组件实现，包含视频音量、暂停、播放、全屏、退出全屏 、播放进度，话不多说直接上代码。
Lsir1998的博客
06-20 1831
vue video(视频)禁止用户拖动进度条，自定义组件实现，包含视频音量、暂停、播放、全屏、退出全屏 、播放进度，话不多说直接上代码。
vue使用video插件vue-video-player的示例
10-14
Vue-video-player 是一个基于 Vue.js 的视频播放插件，它利用 video.js 库提供了丰富的自定义选项和主题，使得在 Vue 项目中实现视频播放变得简单。下面将详细介绍如何在 Vue 项目中使用 vue-video-player 插件。 ...
vue-video-player视频播放器使用配置详解
01-18
本文实例为大家分享了vue-video-player视频播放器的使用配置，供大家参考，具体内容如下 1、安装 npm install vue-video-player -save 2、在main.js中添加 import VueVideoPlayer from 'vue-video-player' // 视频...
详解vue2.0+vue-video-player实现hls播放全过程
08-27
"Vue 2.0 + Vue-Video-Player 实现 HLS 播放全过程详解" 本文将详细介绍如何使用 Vue 2.0 和 Vue-Video-Player 实现 HLS 播放全过程。通过本文，您将了解到如何使用 Vue-Video-Player 实现 HLS 播放，如何配置 ...
Vue移动端video的控制条禁止拖动快进（兼容Android和ios）
热门推荐
Jacky_Long的博客
06-29 1万+
最近公司做一个刷课时的项目，要求在移动端禁止拖动进度条，并有记录播放时间功能，找个了各种方法，整合记录一下。 HTML： &lt;video id="video" src="xxx.mp4" controls="controls" x5-playsinline="" playsinline="" webkit-playsinline="true"&gt;&lt;
html5播放器禁止拖拽功能实例（教学内容禁止拖动观看）
阿酷tony
12-05 4962
html5播放器禁止拖拽功能实例（常用于场景：企业培训、在线教学内容禁止学员拖动视频进行观看），教学内容禁止拖动观看，参数开启后，视频教学内容或视频课件将不允许拖动进度条
GSYVideoPlayer播放器禁止快进，允许回退操作
Ben_Fade的博客
11-17 884
private float x1 = 0; private float x2 = 0; 竖屏状态 detailPlayer.getCurrentPlayer().getProgressBar().setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent motionEvent) { ..
video标签常用控制配置，禁用单击暂停，保留双击全屏
mullerpp的博客
07-15 2594
【代码】video标签常用控制配置，禁用单击暂停，保留双击全屏。
video播放器禁用or启用拖动进度条
繁华是瑾的博客
12-18 5996
做视频教育网站 客户提出一个需求,视频学习完毕时,在观看视频能够拖动进度条.未观看完毕时,禁止拖动视频进度条,只能倍速播放; 用的插件的 videojs一开始用的是 disableProcess.js 插件,但是很快发现一个bug; BUG:第一个视频播放时能够禁止拖动进度条,ok,这个没问题,当切换到第二个视频的时候,视频会出现卡死,然后控制台无限出现 this.videojs.disableProcess is not function 这个错误, 导致视频卡在这里,播放不了; 通过测试发现对于一个
vue-video-player 拖动进度条报错
05-31
如果你在使用 vue-video-player 时拖动进度条出现错误，可能是因为视频文件没有加载完全。你可以检查一下视频文件是否已经完全加载，并且在拖动进度条之前等待一会儿，确保视频文件已经加载完成。 另外，你也可以尝试在 Vue 组件的 mounted 钩子函数中初始化视频播放器，并添加一个监听事件，当视频可以播放时再进行拖动进度条的操作。以下是一个示例代码： ``` <template> <div> <video ref="videoPlayer" width="640" height="360"></video> </div> </template> <script> import 'video.js/dist/video-js.css'; import 'vue-video-player/src/custom-theme.css'; import VideoPlayer from 'vue-video-player'; export default { components: { VideoPlayer }, mounted() { const video = this.$refs.videoPlayer; video.addEventListener('canplay', () => { // 视频可以播放时执行的操作 }); } }; </script> ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值