1.直接修改css /deep/ .vjs-progress-control{ pointer-events: none !important; } 2.js 动态修改 setTimeout(() => { let control = document.querySelectorAll('.vjs-progress-control') control.forEach(item => { item.classList.add('pointer') }) }, 1000)...
后端使用 python web 框架 返回视频文件流,前端使用 vue-video-player进行播放,但是无法拖动进度条进行快进或后退 解决: importos fromfastapi.responsesimportStreamingResponse @app.get("/work/get_file/{file_name}") defdownload_files_stream(file_name:str,response:Response): ...
1.htmlplaysinline不希望用户来拖动进度条 2.js export default{data(){return{playerOptions:{playbackRates:[0.5,1.0,1.5,2.0],// 可选的播放速度autoplay:false,// 如果为true,浏览器准备好时开始回放。muted:false,// 默认情况下将会消除任何音频。loop:false,// 是否视频一结束就重新开始。preload:'auto'...
2. 添加一个标志位来控制是否允许拖动进度条。在拖动进度条时,将标志位置为false,在拖动结束后将其置为true,确保只有在不拖动进度条的情况下才会更新播放进度。 经过以上修改,vue-video-player组件修复了在特定场景下播放进度条不稳定的bug。现在用户可以在快速拖动视频播放进度条时,正常进行视频播放,而不会出现不...
我也有遇到这种问题，请问有解决吗？需求是第一次隐藏进度条不允许拖动，在华为手机上自动劫持了video标签...
demo 通过speed关闭进度条拖动功能。 并且通过 currentTime属性控制从 60 秒开始播放<template> <div> <vue3VideoPlay v-bind="options" /> </div> </template> <script setup lang="ts"> import { reactive } from "vue"; const options = reactive({ width: "500px", //播放器高度 height: "260px...
可以通过props的speed开启或关闭进度条功能, 并且通过currentTime属性控制从 60 秒开始播放 :::demo 通过speed关闭进度条拖动功能。 并且通过currentTime属性控制从 60 秒开始播放 <template> <div> <longzeVideoPlayv-bind="options"poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"/...
// 设置高度,fluid需要设置成flase// 配置控制栏controlBar:{volumePanel:{inline:false,//音量调节是否水平},timeDivider:true,// 时间分割线currentTimeDisplay:true,//当前播放位置durationDisplay:true,// 总时间progressControl:true,// 进度条remainingTimeDisplay:false,// 剩余时间fullscreenToggle:true// 全屏...
实习快要结束,想把实习项目的一部分记录一下 (项目创建就略过了) 一、 播放器基本实现 采用vue-video-player 顺序依次是 1. 安装依赖 n...
项目中视频可以正常播放,但是不能拖动进度条,拖动进度条就会从头开始,解决办法是在后台请求响应头加上下面两行代码 response.setHeader("Accept-Ranges","bytes");response.setHeader("Content-Length",String.valueOf(fileLength)); 最后编辑于:2022.02.28 11:34:34 ...