1. 导入 video.js 包
npm install video.js -S
npm install videojs-flash -S
2. 代码实现
<template><div><videoid="my-video"class="video-js"controlspreload="auto"width="640"height="264":poster="videoTitleImg"data-setup="{}"ref="videoPlayer"><source :src="videoSrc" type="video/mp4"/><source src="MY_VIDEO.webm" type="video/webm"/><div class="video-progress" @mousedown="onProgressMouseDown"><div class="video-played" ref="progressBar"></div></div><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to aweb browser that<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p></video></div>
</template><script>
import videoJs from 'video.js'export default {props: {videoTitleImg: '',videoSrc: ''},data () {return {dragging: false}},methods: {// onProgressMouseDown (event) {// this.dragging = true// this.startX = event.clientX// this.startTime = this.player.currentTime()// document.addEventListener('mousemove', this.onProgressMouseMove)// document.addEventListener('mouseup', this.onProgressMouseUp)// },// onProgressMouseMove (event) {// if (this.dragging) {// console.log('xxxxx', event, 'progressBar', this.$refs.progressBar.parentNode)// const deltaX = event.clientX - this.startX// const ratio = deltaX / this.$refs.progressBar.parentNode.offsetWidth// const newTime = this.startTime + ratio * this.player.duration()// this.player.currentTime(newTime)// }// },// onProgressMouseUp () {// this.dragging = false// document.removeEventListener('mousemove', this.onProgressMouseMove)// document.removeEventListener('mouseup', this.onProgressMouseUp)// }},mounted () {this.player = videoJs(this.$refs.videoPlayer)// 监听进度条拖动事件this.player.on('timeupdate', (time) => {if (this.player.userActive()) {// 用户正在拖动进度条// 可以在这里执行你需要的操作}})},beforeDestroy () {if (this.player) {this.player.dispose()}}
}
</script>
<style scoped>
.video-progress {position: relative;width: 100%;height: 5px;background-color: #e5e5e5;cursor: pointer;
}.video-played {position: absolute;left: 0;height: 100%;background-color: #3e8f3e;
}
</style>
)
