当前位置：首页 > VUE

vue实现播放视频

2026-01-17 02:25:33VUE

vue实现播放视频的方法

使用Vue实现视频播放可以通过HTML5的<video>标签或第三方库完成。以下是几种常见方法：

使用原生HTML5 video标签

在Vue组件模板中直接使用<video>标签：

<template>
  <video controls width="600">
    <source src="video.mp4" type="video/mp4">
    您的浏览器不支持HTML5视频
  </video>
</template>

动态绑定视频源

通过Vue的数据绑定动态切换视频源：

<template>
  <video :src="currentVideo" controls></video>
  <button @click="changeVideo">切换视频</button>
</template>

<script>
export default {
  data() {
    return {
      currentVideo: 'video1.mp4',
      videos: ['video1.mp4', 'video2.mp4']
    }
  },
  methods: {
    changeVideo() {
      this.currentVideo = this.videos[1]
    }
  }
}
</script>

使用第三方视频播放器库

安装video.js库：

npm install video.js

在Vue组件中使用：

<template>
  <video-player :options="playerOptions"/>
</template>

<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'

export default {
  components: { videoPlayer },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          src: 'video.mp4',
          type: 'video/mp4'
        }]
      }
    }
  }
}
</script>

实现自定义控制按钮

通过ref获取video元素并自定义控制：

<template>
  <video ref="myVideo" width="600"></video>
  <button @click="play">播放</button>
  <button @click="pause">暂停</button>
</template>

<script>
export default {
  methods: {
    play() {
      this.$refs.myVideo.play()
    },
    pause() {
      this.$refs.myVideo.pause()
    }
  },
  mounted() {
    this.$refs.myVideo.src = 'video.mp4'
  }
}
</script>

处理视频事件

监听视频事件如播放、暂停等：

<template>
  <video 
    @play="onPlay"
    @pause="onPause"
    @ended="onEnded"
    controls
    src="video.mp4"
  ></video>
</template>

<script>
export default {
  methods: {
    onPlay() {
      console.log('视频开始播放')
    },
    onPause() {
      console.log('视频暂停')
    },
    onEnded() {
      console.log('视频播放结束')
    }
  }
}
</script>

vue实现播放视频