当前位置：首页 > VUE

vue实现视频实时播放

2026-02-24 22:11:14VUE

Vue实现视频实时播放的方法

在Vue中实现视频实时播放通常需要结合HTML5的<video>标签和WebRTC、HLS或WebSocket等技术。以下是几种常见的方法：

使用HTML5 video标签

最简单的实现方式是使用HTML5的<video>标签直接播放视频流。适用于MP4等静态文件或HLS流。

<template>
  <video controls autoplay>
    <source src="视频流地址" type="video/mp4">
  </video>
</template>

使用HLS.js播放HLS流

对于HLS（HTTP Live Streaming）协议的视频流，可以使用hls.js库来实现。

安装hls.js：

npm install hls.js

在Vue组件中使用：

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

<script>
import Hls from 'hls.js'

export default {
  mounted() {
    const videoSrc = '视频流地址.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()
      })
    }
  }
}
</script>

使用WebRTC实现实时视频流

对于需要超低延迟的实时视频，可以使用WebRTC技术。

<template>
  <video ref="videoPlayer" autoplay playsinline></video>
</template>

<script>
export default {
  mounted() {
    const video = this.$refs.videoPlayer

    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        video.srcObject = stream
      })
      .catch(error => {
        console.error('Error accessing media devices:', error)
      })
  },
  beforeDestroy() {
    const video = this.$refs.videoPlayer
    if (video.srcObject) {
      video.srcObject.getTracks().forEach(track => track.stop())
    }
  }
}
</script>

使用WebSocket传输视频数据

对于自定义视频流协议，可以通过WebSocket接收数据并使用MediaSource API播放。

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

<script>
export default {
  mounted() {
    const video = this.$refs.videoPlayer
    const mediaSource = new MediaSource()
    video.src = URL.createObjectURL(mediaSource)

    mediaSource.addEventListener('sourceopen', () => {
      const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')

      const ws = new WebSocket('ws://视频流服务器地址')
      ws.binaryType = 'arraybuffer'

      ws.onmessage = (event) => {
        if (mediaSource.readyState === 'open') {
          sourceBuffer.appendBuffer(new Uint8Array(event.data))
        }
      }
    })
  }
}
</script>