vue-video-player 进度条不能调节BUG

最新推荐文章于 2025-03-24 17:30:19 发布
原创 最新推荐文章于 2025-03-24 17:30:19 发布 · 3.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bug

本文解决Vue-video-player组件中视频进度条无法拖动的问题，原因为未转换为字节流，通过使用nginx转发得以解决。

问题：使用vue-video-player组件播放视频，视频进度条不能点击不能拖动。点击或者拖动就会重新从头开始播放。

产生原因：

其实就是没有转成字节流，导致不能选择某个视频点

解决方式

使用nginx进行转发

 

参考文章：https://blog.youkuaiyun.com/weixin_43616097/article/details/106342909

vue3实现video控件的h5端进度条拖拽与跳转
qq_42039912的博客
09-09 2680
vue3 + js + less 实现video进度条拖拽和跳转
【视频组件】vue-video-player的使用
weixin_42575720的博客
05-27 568
效果图： #####一、安装 npm install vue-video-player -S npm install 'video.js' -S #####二、导入 import Vue from 'vue' import VideoPlayer from 'vue-video-player' // require('video.js/dist/video-js.css') //按官网引会找不到然后报错，换成下面那个 require('vue-video-player/node_modules/vid
解决浏览器使用 vue-video-player播放视频不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放
ywp2021的博客
11-14 8015
不能拖动或点击进度条到指定位置播放,拖动或点击进度条会立即反弹回起点播放的问题
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...
使用vue-video-player点击进度条失效
liyanfeng的博客
05-26 5533
产生原因： 请求服务器端的视频，响应头中缺少如下部分： 解决方案： 在nginx中添加配置： { index index.html }
vue3通过vue-video-player实现视频倍速、默认全屏、拖拽进度条等功能
SunFlower914的博客
06-25 4682
options中的soure.type可选值切换后，type类型一定要和src值返回的数保持一致，否则资源无法加载成功；鼠标点击进度条后视频直接重置到了起点，这个问题可以参考
vue aplayer 进度条无法拖动_Vue-rideo-player视频播放插件的使用
weixin_39901203的博客
12-12 1145
***** git项目地址： https://github.com/surmon-china/vue-video-player***** 参考文章： https://www.jianshu.com/p/532fc1d8c90c使用安装： npm install vue-video-player --save2. 在main.js入口文件中引入import VideoPlayer from 'vue...
深入Vue-video-player：专家级源码解读与架构优化
Vue-video-player是一个基于Vue.js的视频播放器组件，旨在提供易用且功能丰富的视频播放解决方案。本文首先概述了Vue-video-player的基本概念和核心原理，包括视频播放基础和架构设计。接着，深入探讨了功能模块，如...
vue 音乐进度条拖拽
stm870581942的博客
01-19 1423
音乐进度条拖拽这个点卡了我2天，遇到了很多问题，一开始我的思路是自定义设计一个进度条，进度条按时间推移和点击进度条跳转音乐播放都能实现了，但最后滑动进度条卡住了，一开始尝试mousedown，mousemove，mouseup实现，但鼠标移出区域后进度条就会停止，达不到我想要的效果，我能力有限，不知道要怎么实现。 之后想到input有个range类型，就试了试，发现简单很多。 <input type="range" class="musicBar" ref="musicBar" v-m
使用vue2封装aliplayer播放器，本项目使用m3u8,提供播放 暂停 销毁 替换，封装组件可直接导入项目使用
weixin_56604618的博客
08-05 740
16.18.0基于以下二次开发这个示例为直播模式，点击复选框会销毁这个示例，点击复选框后，禁用取消复选框，但提供了下侧按钮销毁这个示例，有进度条，可倍数播放路由在public下配置，主要是模拟接口QQ，动态路由渲染这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint根据用户权限来动态生成侧边栏和 router目前版本为v4.0+基于vue-cli进行构建。
h5，video禁止拖动进度条，禁止快进
03-24
利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频播放只有这么一个要求，所以搞得比较简单。代码仅作参考。大神轻喷。
H5视频全屏安卓bug解决
qq_34701838的博客
03-09 1564
安卓手机会出现白色背景帧需要加入纯海报图： poster="path-imgs" 安卓手机没有播放按钮解决： letvideo=document.getElementById('video') video.play() setTimeout(()=>{ video.pause() },20) 禁止安卓画中画： disablePictureInPicture="true" <videodi...
vue+vue-video-player进度条拖动及断续播放
九四一二的博客
03-12 9202
vue-video-player是一款视频播放插件，具体怎么引入vue-video-player直接点进去有详细的介绍。 项目中视频可以正常播放，但是不能拖动进度条，拖动进度条就会从头开始，解决办法是在后台请求响应头加上下面两行代码 后端 response.setHeader("Accept-Ranges", "bytes"); response.setHeader("Content-Length", String.valueOf(fileLength)); 这样进度条...
video标签播放视频无法拖动进度条（使用nginx解决）
qq_34465338的博客
05-07 1万+
video标签播放视频无法拖动进度条（使用nginx解决）
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;
vue-video-player 点击进度条时，如果看过了就可以返回没看过继续播放不允许点击...
weixin_42576186的博客
02-15 758
如果您使用的是 vue-video-player 播放器，在点击进度条时，如果已经看过了该部分视频，那么将不允许返回未看过的部分继续播放。这是因为该播放器会记录您已经观看的视频部分，以便下次播放时继续从您停止观看的位置开始播放。如果您需要返回之前的部分重新观看，您可以通过手动拖动进度条或者使用播放器自带的倒回/快进按钮实现。 ...
vue-video-player 如何禁止拖动进度条
s18911896943的博客
07-13 1137
1.直接修改css 2.js 动态修改
前端vue等 视频插件无法拖动进度条bug，视频进度bug
最新发布
qq_49221992的博客
03-24 467
我下载下来后，首先测试一下，嗯，确实是这样的，基本功能没问题，一动进度条就回滚到0，于是解决思路如下（本人是只会copy的学渣，若有吐槽嘴下留情）：因为用的是uniapp+v2，首先百度，推荐用vue-video-player，下载，结果发现导入都让我头晕了，一个破css死活没有。后来发现低版本的才有这个css，直接npm i 下载的是6点几的版本，教程是4点几的，下载4点几的，还是不行，后来想了想，这个都进化到v3了，还贴冷屁股用这玩意干啥呢，换一个得了，修改，嗯，居然可以拖进度条？
video.js实现鼠标移入播放及根据鼠标移动位置播放对应帧及进度条显示
lalaladamowang的博客
06-23 5531
这里写目录标题video.js安装及使用鼠标移入播放移出停止播放根据鼠标移动位置播放对应帧及进度条显示 这段时间都是自主学习，有些无聊了，在我的强烈要求下我师父让我做一个类似于B站视频预览的效果，效果如下图，然后让我看video.js的文档来实现，现在做一个总结。 video.js安装及使用 npm install video.js //在main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.pr
vue-video-player显示进度条
11-29
要在vue-video-player中显示进度条，可以使用插件自带的控制条。控制条中包含了进度条，可以通过设置控制条的属性来控制进度条的显示。 以下是一个简单的例子，演示如何在vue-video-player中显示进度条： ```html ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值