创建Vue组件:创建一个新的Vue组件,如VideoPlayer.vue。 使用HTML5 :在组件模板中添加 创建进度条和圆圈:使用HTML和CSS创建一个进度条和可拖动的圆圈。 绑定事件:绑定JavaScript事件来处理圆圈的拖动和进度条的更新。 示例代码: <template> <div class="video-player"> <video ref="video" @timeupdate="updateProgr...
let dest=(progressHeight/height)*homeVideo.value.duration;//console.log("dest:"+dest);homeVideo.value.currentTime=Math.floor(dest); }//移动的类型,用来标明是否在拖动进度条const moveType=ref("");//拖动开始时点击的位置const moveOffsetY=ref(0);//拖动开始时进度条的高度const curHeight=ref(0)...
首先,通过npm安装video.js: bash npm install video.js 然后,在你的Vue组件中引入video.js及其样式: javascript import videojs from 'video.js'; import 'video.js/dist/video-js.css'; 2. 创建Vue组件来封装音视频播放器,并在其中添加进度条元素 创建一个新的Vue组件,例如VideoPlayer.vue,并在模板中添...
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)...
1、使用HTML5的Video标签与Vue结合;2、通过Vue的事件绑定和方法控制;3、利用ref获取视频元素进行操作。 在Vue中实现视频快进的功能主要依靠HTML5的Video标签与Vue的事件处理机制。通过获取视频元素,我们可以控制视频的播放进度。 一、使用HTML5的Video标签与Vue结合 首先
vue做播放器和进度条 <template><video-playerclass="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"@play="onPlayerPlay($event)"@pause="onPlayerPause($event)"@seeking="videoSeeking"@seeked="videoSeeked":events="['seeking','seeked']"></video-player><...
后端使用 python web 框架 返回视频文件流,前端使用 vue-video-player进行播放,但是无法拖动进度条进行快进或后退 解决: importos fromfastapi.responsesimportStreamingResponse @app.get("/work/get_file/{file_name}") defdownload_files_stream(file_name:str,response:Response): ...
可以通过props的speed开启或关闭进度条功能, 并且通过 currentTime属性控制从60秒开始播放 :::demo 通过speed关闭进度条拖动功能。 并且通过 currentTime属性控制从60秒开始播放 <template> <div> <vue3VideoPlay v-bind="options" poster='https://xdlumia.oss-cn-beijing.aliyuncs.com/videos/02.jpg'/> </div...
可以通过props的speed开启或关闭进度条功能, 并且通过currentTime属性控制从 60 秒开始播放 :::demo 通过speed关闭进度条拖动功能。 并且通过currentTime属性控制从 60 秒开始播放 <template> <div> <vue3VideoPlayv-bind="options"poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"/...
拖动进度条首先想到的vue的双向绑定,但这里有个问题就是:双向绑定数据后拖动改变时间,但是歌曲还在播放,穿过来的数据导致进度条向前。两者有明显冲突。 三、实现过程 滚动条的显示 获取相关数据 需要用到的<video>中属性currentTime、duration及监听方法timeupdate、durationchange,将数据发送给对应需要用到的组件。