当前位置：首页 > VUE

vue实现RTMP

2026-01-12 21:29:29VUE

Vue 实现 RTMP 流播放

在 Vue 项目中实现 RTMP 流播放，通常需要借助第三方库或播放器插件。RTMP（Real-Time Messaging Protocol）是一种实时流媒体传输协议，常用于直播场景。

使用 flv.js 播放 RTMP 流

flv.js 是一个基于 HTML5 的 FLV 播放器，支持 HTTP-FLV 和 RTMP 流。以下是实现步骤：

安装 flv.js 依赖：

npm install flv.js

在 Vue 组件中使用：

<template>
  <div>
    <video ref="videoElement" controls autoplay muted></video>
  </div>
</template>

<script>
import flvjs from 'flv.js'

export default {
  mounted() {
    this.initPlayer()
  },
  beforeDestroy() {
    this.destroyPlayer()
  },
  methods: {
    initPlayer() {
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.videoElement
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: 'rtmp://your-stream-url/live/streamkey'
        })
        flvPlayer.attachMediaElement(videoElement)
        flvPlayer.load()
        flvPlayer.play()
      }
    },
    destroyPlayer() {
      if (this.flvPlayer) {
        this.flvPlayer.pause()
        this.flvPlayer.unload()
        this.flvPlayer.detachMediaElement()
        this.flvPlayer.destroy()
      }
    }
  }
}
</script>

使用 video.js 播放 RTMP 流

video.js 是一个通用的视频播放器框架，支持 RTMP 协议。

安装依赖：

npm install video.js @videojs-player/vue

在 Vue 组件中使用：

<template>
  <videojs-player
    src="rtmp://your-stream-url/live/streamkey"
    type="rtmp/flv"
    controls
    autoplay
    muted
  />
</template>

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

export default {
  components: {
    VideoJsPlayer
  }
}
</script>

使用 hls.js 播放 RTMP 转 HLS 流

如果服务器支持 RTMP 转 HLS，可以使用 hls.js 播放 HLS 流：

安装依赖：

npm install hls.js

Vue 组件实现：

<template>
  <div>
    <video ref="videoElement" controls autoplay></video>
  </div>
</template>

<script>
import Hls from 'hls.js'

export default {
  mounted() {
    this.initPlayer()
  },
  methods: {
    initPlayer() {
      const video = this.$refs.videoElement
      const hls = new Hls()

      hls.loadSource('http://your-hls-stream.m3u8')
      hls.attachMedia(video)
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play()
      })
    }
  }
}
</script>