当前位置：首页 > VUE

vue实现视频

2026-03-27 18:06:50VUE

Vue 实现视频播放功能

在 Vue 中实现视频播放功能可以通过多种方式完成，包括使用 HTML5 的 <video> 标签、第三方视频播放器库等。以下是几种常见的实现方法。

使用 HTML5 `<video>` 标签

HTML5 提供了 <video> 标签，可以直接嵌入视频文件。在 Vue 中，可以通过动态绑定 src 属性来控制视频源。

<template>
  <div>
    <video controls width="600">
      <source :src="videoSrc" type="video/mp4">
      您的浏览器不支持 HTML5 视频标签。
    </video>
  </div>
</template>

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

controls 属性显示视频控制条（播放、暂停、音量等）。
width 设置视频宽度。
:src 绑定动态视频源路径。

使用第三方视频播放器库

如果需要更丰富的功能（如自定义皮肤、字幕支持、弹幕等），可以使用第三方库如 video.js 或 vue-video-player。

使用 `vue-video-player`

安装依赖：
```
npm install vue-video-player video.js
```

在 Vue 组件中使用：

vue实现视频


<template>
<div>
 <video-player :options="playerOptions" />
</div>
</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/your/video.mp4', type: 'video/mp4' }] } } } }

```

playerOptions 配置播放器行为（如自动播放、控制条等）。
sources 指定视频源和类型。

实现视频流播放

如果需要播放 RTMP 或 HLS 等流媒体，可以使用 flv.js 或 hls.js。

使用 `hls.js` 播放 HLS 流

安装依赖：
```
npm install hls.js
```

在 Vue 组件中使用：


<template>
<div>
 <video ref="videoPlayer" controls width="600"></video>
</div>
</template>

import Hls from 'hls.js'

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

if (Hls.isSupported()) {
  const hls = new Hls()
  hls.loadSource(videoSrc)
  hls.attachMedia(video)
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    video.play()
  })
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = videoSrc
  video.addEventListener('loadedmetadata', () => {
    video.play()
  })
}

} }

```

Hls.isSupported() 检测浏览器是否支持 HLS。
loadSource 加载 HLS 流地址。
attachMedia 绑定视频元素。

自定义视频控制

如果需要完全自定义视频控制逻辑，可以通过监听 <video> 的事件和方法实现。

<template>
  <div>
    <video ref="videoPlayer" width="600" @timeupdate="onTimeUpdate"></video>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
    <span>{{ currentTime }} / {{ duration }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0,
      duration: 0
    }
  },
  mounted() {
    this.$refs.videoPlayer.addEventListener('loadedmetadata', () => {
      this.duration = this.$refs.videoPlayer.duration
    })
  },
  methods: {
    play() {
      this.$refs.videoPlayer.play()
    },
    pause() {
      this.$refs.videoPlayer.pause()
    },
    onTimeUpdate() {
      this.currentTime = this.$refs.videoPlayer.currentTime
    }
  }
}
</script>