vue使用video.js实现播放到某一时间弹框，禁止快进等功能

最新推荐文章于 2024-03-09 14:17:14 发布
最新推荐文章于 2024-03-09 14:17:14 发布
阅读量783 收藏 3
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinkailu0_0/article/details/130828427
版权

 

 这里watch监听的是timeUpdate事件里，定义在data里的currentTime变量。 自己输出看一下，每秒都会监听到。 因为我们用了Math.floor()所以是12345... 一直监听的 所以newV oldV   一般的差值都是1   只有你点进度条条快进的时候会有很大的差值， 所以判断大于2的时候去保存一个旧值，最后我们再走进seeking方法。

文档写的比较少，这里简单记录一下，如果有好的方法还请大佬指点迷津。

qinkailu0_0
关注
限制 video 播放 快进 （vue）
CLdemies的博客
09-07 1880
限制video 标签
h5，video禁止拖动进度条，禁止快进
03-24
利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频播放只有这么一个要求，所以搞得比较简单。代码仅作参考。大神轻喷。
js禁止用户通过video标签自带的进度条进行快进（包括键盘方向键快进），允许快退，下次播放时从上次观看时长继续播放。
什么当当当啊？
12-22 2880
VUE 中禁止用户通过video标签自带的进度条进行快进（包括键盘方向键快进），允许快退，下次播放时从上次观看时长继续播放。
videojs 禁止快进 ,能回退
weixin_32321053的博客
04-01 1189
videojs 禁止快进 ,能回退 var last = 0,max_time=0; //当目前的播放位置已更改时 vd.on('timeupdate', function(){ var current = vd.currentTime(); if(current < max_time){
video.js 实现视频只能后退不能快进的思路详解
10-18
主要介绍了video.js 实现视频只能后退不能快进的思路详解，主要思路是点击进度条需要获取拖动前的时间点，具体实例代码大家跟随小编一起看看吧
html vedio取消快进,js video.js - 禁止拖动进度条，禁止快进。
weixin_33699970的博客
06-21 1934
if(!isDrag) {var isMousedown = false;videoPlayer.on('pause', function() {if(isMousedown == false) {oldTime = videoPlayer.currentTime();}});videoPlayer.on('play', function() {isMousedown = false;newTim...
Vue保姆级项目教程：十万字零基础开发信贷管理系统！
weixin_55355282的博客
03-09 996
本文档概述了信贷管理系统的开发过程和关键需求，包括用户管理、信贷申请、贷款审批、数据分析、安全性、兼容性、扩展性和用户界面。目的是提高信贷业务的效率和准确性，满足机构对信贷业务管理的需求。
拖拽式Vue组件代码生成平台(LCG)新版详细介绍
SAHADEV的专栏
01-07 6422
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具，英文全称：Low Code Generator，简称LCG。它也是一种LowCode解决方案。通过它可以快速完成Vue组件的代码骨架搭建，通过减少不必要的重复工作从而带来开发效率的提升。 体验地址：https://lc.100tal.com/ 出现的背景 做前端久了就难免会发现有一些工作其实是繁复的，它们有一些共同的特点： 频率高 非常基础 花费时间 而有一部分工作是可以通过技术手段解决的，例如在写Vue时会发现： class的名称需
vue常见面试题（二）
hrj970808的博客
11-17 1082
文章目录26.v-if和v-for的优先级27.assets和static的区别28.列举常用的指令29.vue常用的修饰符修饰符（1）.lazy（2）.number（3）.trim事件修饰符（1）.stop(2) .prevent(3).capture(4).self(5) .once(6).passive(7).事件修饰符还可以串联键盘修饰符系统修饰键.exact修饰符鼠标按钮修饰符30.数组更新检测31.Vue.set视图更新Vue.set() 响应式新增与修改数据32.自定义指令详解第一步第二步完善
前端2020面试题195道
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
js+css点击视频在弹出的小窗口中播放
10-24
js+css点击视频在弹出的小窗口中播放
Python常用组件、命令大总结(持续更新)
热门推荐
LDC，公众号【轻松学编程】
03-12 1万+
Python后端开发常用组件、命令（干货） 持续更新中… 1、生成6位数字随机验证码 import random import string def num_code(length=6): """ 生成长度为length的数字随机验证码 :param length: 验证码长度 :return: 验证码 """ return ''.jo.....................
video.js只允许回退不允许快进支持加载时跳转到上次播放时间
liu_131421的博客
11-09 1316
video.js只允许回退不允许快进支持加载时跳转到上次播放时间
js video.js - 禁止拖动进度条，禁止快进。
weixin_30580943的博客
01-19 5457
if(!isDrag) { var isMousedown = false; videoPlayer.on('pause', function() { if(isMousedown == false) { 　oldTime = videoPlayer.currentTime(); } }); videoPlayer.on('play', function() { isMo...
vue移动端video禁止快进
weixin_50866580的博客
12-03 891
vue移动端video禁止快进 参考文章：https://blog.csdn.net/qq_37300451/article/details/80852684 参考上文做出功能后，发现视频在暂停后，再次播放时，不是从上次暂停的位置开始播放，后来折腾了一天，发现不是代码的问题，是视频的问题，视频有个关键帧距离的概念 具体参考文章： https://www.cnblogs.com/luoeeyang/p/9765506.html 感谢上面两位作者提供的帮助。 后面还有个功能，用户暂停或者退出页面后，下次进入页面
video.js 实现视频只能后退，不能快进
羊毛毯的专栏
08-09 4813
主要思路是点击进度条需要获取拖动前的时间点，我用mouseup事件去处理的，获得到了oldTime 就好办，然后根据需求限制拖动快进快退，因为项目允许回看，不允许快进，所以得记录maxTime，记录用户正常情况观看视频最大的那个时间点，不允许超过maxTime var isMousedown = false; var oldTime=0,newTime=0,maxTime=0; //拖动...
js控制video控件禁止快进 但是可以后退 完美解决
有问题可关注公众号：前端研究院 后台输入问题回复
08-07 1605
<!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>Document&l.
js控制video控件禁止快进 但可以后退
weixin_47264982的博客
08-12 908
<!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
vue2中使用video.js实现快进快退功能
最新发布
10-16
在 Vue2 中，使用 `video.js` 实现视频的快进快退功能通常需要结合 JavaScript 和 video.js 的 API。Video.js 提供了丰富的控制选项，包括时间轴操作。下面是一个简单的步骤说明： 1. 首先，在项目中安装 `video.js` 和 `vue-video-player` 这样的库，它提供了 Vue 组件化的支持。你可以通过 npm 安装： ``` npm install video.js vue-video-player ``` 2. 然后在你的组件模板中引入并使用 `VueVideoPlayer` 组件： ```html <template> <div> <vue-video-player :src="videoUrl" ref="videoPlayer"></vue-video-player> </div> </template> <script> import VueVideoPlayer from 'vue-video-player'; export default { components: { VueVideoPlayer }, data() { return { videoUrl: 'your_video_url', }; }, }; </script> ``` 3. 在 `methods` 或者自定义事件中，你可以获取到 `VueVideoPlayer` 的实例，并使用其提供的 `currentTime` 和 `seekTo` 方法来实现快进和快退： ```javascript methods: { fastForward() { const player = this.$refs.videoPlayer.player; if (player && !isNaN(player.currentTime)) { // 快进一定时间，例如5秒 player.seekTo(player.currentTime + 5); } }, rewind() { const player = this.$refs.videoPlayer.player; if (player && !isNaN(player.currentTime)) { // 快退同样时间 player.seekTo(player.currentTime - 5); } }, }, ``` 4. 当然，为了提供交互性，你还可以添加按钮或者其他触发事件的方式来调用这些方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值