vue 配合 video.js 实现视频播放

最新推荐文章于 2025-05-16 15:07:51 发布

布Coder

最新推荐文章于 2025-05-16 15:07:51 发布

阅读量670

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript vue.js 音视频

本文链接：https://blog.youkuaiyun.com/haizhuang_bu/article/details/138226852

本文介绍了如何在Vue项目中使用video.js库创建一个支持HTML5视频的可控制播放器，包括引入库、模板实现、事件监听和销毁处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 导入 video.js 包

npm install video.js -S

npm install videojs-flash -S

2. 代码实现

<template>
  <div>
    <video
      id="my-video"
      class="video-js"
      controls
      preload="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 a
        web 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>