Vue Video.js是
一个基于
Vue.js和
Video.js的
HTML5视频播放器组件，可以帮助我们快速搭建
一个美观实用的视频播放器。在
Vue Video.js中，要实现
进度条拖动，需要做以下几个步骤：
1.首先，在
Vue Video.js中，可以通过vjs-player组件来实现视频播放功能，我们需要给这个组件添加ref属性，以便在后面使用。
2.在vjs-player的mounted生命周期中，我们可以通过this.$refs.player来获取到
video.js的player对象，然后通过player.on方法来监听时间变化事件。
3.在监听事件中，可以获取到当前播放的时间和视频总时长，从而计算出当前
进度条的位置。同时，也可以监听
进度条的mousedown和mousemove事件，来实现
进度条拖动的功能。
4.最后，在
进度条拖动结束的时候，需要通过player.currentTime()方法来
设置视频的当前播放时间。
下面是相关代码片段:
```
vue
<template>
<div>
<vjs-player ref="player" :options="playerOptions"></vjs-player>
<div class="progress-bar-wrap">
<div class="progress-bar" ref="progressBar" @mousedown="onProgressBarMouseDown($event)">
<div class="progress-bar-inner" :style="{width: progressWidth}"></div>
<div class="progress-bar-thumb" :style="{left: progressWidth}"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
playerOptions: {
autoplay: false,
controls: true,
sources: [{
src: 'https://example.com/path/to/
video.mp4',
type: '
video/mp4'
}]
},
progressWidth: 0,
isDragging: false
}
},
mounted() {
const player = this.$refs.player.$player
player.on('timeupdate', () => {
const currentTime = player.currentTime()
const duration = player.duration()
this.progressWidth = `${(currentTime / duration) * 100}%`
})
document.addEventListener('mousemove', this.onDocumentMouseMove)
document.addEventListener('mouseup', this.onDocumentMouseUp)
},
beforeDestroy() {
document.removeEventListener('mousemove', this.onDocumentMouseMove)
document.removeEventListener('mouseup', this.onDocumentMouseUp)
},
methods: {
onProgressBarMouseDown(event) {
this.isDragging = true
this.onDocumentMouseMove(event)
},
onDocumentMouseMove(event) {
if (!this.isDragging) return
const progressBar = this.$refs.progressBar
const rect = progressBar.getBoundingClientRect()
const progressWidth = ((event.clientX - rect.left) / rect.width) * 100
this.progressWidth = `${Math.min(Math.max(progressWidth, 0), 100)}%`
},
onDocumentMouseUp() {
if (!this.isDragging) return
const player = this.$refs.player.$player
const duration = player.duration()
player.currentTime(duration * (parseInt(this.progressWidth) / 100))
this.isDragging = false
}
}
}
</script>
<style>
.progress-bar-wrap {
width: 100%;
height: 8px;
background-color: #f2f2f2;
}
.progress-bar {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
}
.progress-bar-inner {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #00bfff;
}
.progress-bar-thumb {
position: absolute;
top: -5px;
left: -8px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #00bfff;
}
</style>
1350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
