当前位置：首页 > VUE

vue视频怎么实现

2026-03-28 08:23:10VUE

vue视频实现方法

使用Vue.js实现视频功能可以通过原生HTML5的<video>标签或集成第三方库来实现。以下是几种常见的实现方式：

使用HTML5原生video标签

在Vue组件中直接使用<video>标签，结合Vue的数据绑定和控制方法：

<template>
  <div>
    <video ref="videoPlayer" controls>
      <source :src="videoSrc" type="video/mp4">
    </video>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'path/to/video.mp4'
    }
  },
  methods: {
    play() {
      this.$refs.videoPlayer.play()
    },
    pause() {
      this.$refs.videoPlayer.pause()
    }
  }
}
</script>

使用第三方视频播放器库

对于更复杂的需求，可以使用专门的Vue视频播放器组件：

vue-video-player：基于Video.js的Vue封装

npm install vue-video-player video.js


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

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

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

```

vue-plyr：轻量级的HTML5播放器封装

npm install vue-plyr


<template>
<plyr>
 <video controls>
   <source :src="videoSrc" type="video/mp4">
 </video>
</plyr>
</template>

import VuePlyr from 'vue-plyr' import 'vue-plyr/dist/vue-plyr.css'

export default { data() { return { videoSrc: 'path/to/video.mp4' } } }

```

实现视频流播放

对于直播或流媒体，可以使用HLS或DASH协议：

<template>
  <video ref="videoPlayer" controls></video>
</template>

<script>
import Hls from 'hls.js'

export default {
  mounted() {
    const videoSrc = 'http://example.com/live/stream.m3u8'
    const video = this.$refs.videoPlayer

    if (Hls.isSupported()) {
      const hls = new Hls()
      hls.loadSource(videoSrc)
      hls.attachMedia(video)
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc
    }
  }
}
</script>

自定义视频控制

通过Vue的事件和方法完全自定义视频控制界面：

vue视频怎么实现

<template>
  <div class="video-container">
    <video ref="video" @timeupdate="updateProgress">
      <source :src="videoSrc" type="video/mp4">
    </video>
    <div class="controls">
      <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
      <input type="range" v-model="progress" @input="seek">
      <span>{{ currentTime }} / {{ duration }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'path/to/video.mp4',
      isPlaying: false,
      progress: 0,
      currentTime: '0:00',
      duration: '0:00'
    }
  },
  methods: {
    togglePlay() {
      const video = this.$refs.video
      this.isPlaying ? video.pause() : video.play()
      this.isPlaying = !this.isPlaying
    },
    updateProgress() {
      const video = this.$refs.video
      this.progress = (video.currentTime / video.duration) * 100
      this.currentTime = this.formatTime(video.currentTime)
      this.duration = this.formatTime(video.duration)
    },
    seek(e) {
      const video = this.$refs.video
      video.currentTime = (e.target.value / 100) * video.duration
    },
    formatTime(seconds) {
      const mins = Math.floor(seconds / 60)
      const secs = Math.floor(seconds % 60)
      return `${mins}:${secs < 10 ? '0' : ''}${secs}`
    }
  }
}
</script>