当前位置：首页 > VUE

vue实现flvvideo

2026-03-07 07:07:20VUE

Vue 中实现 FLV 视频播放

使用 flv.js 库实现 FLV 视频播放，这是一个由 Bilibili 开源的纯 JavaScript FLV 播放器。

安装 flv.js 依赖

vue实现flvvideo

npm install flv.js --save

基本实现步骤

创建 Vue 组件并引入 flv.js

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

<script>
import flvjs from 'flv.js'

export default {
  data() {
    return {
      flvPlayer: null
    }
  },
  mounted() {
    this.initFlvPlayer()
  },
  beforeDestroy() {
    this.destroyFlvPlayer()
  },
  methods: {
    initFlvPlayer() {
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.videoElement
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: '你的FLV视频流地址'
        })
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    },
    destroyFlvPlayer() {
      if (this.flvPlayer) {
        this.flvPlayer.pause()
        this.flvPlayer.unload()
        this.flvPlayer.detachMediaElement()
        this.flvPlayer.destroy()
        this.flvPlayer = null
      }
    }
  }
}
</script>

高级配置选项

可以配置不同的参数优化播放体验

vue实现flvvideo

this.flvPlayer = flvjs.createPlayer({
  type: 'flv',
  url: '你的FLV视频流地址',
  isLive: true,  // 是否为直播流
  hasAudio: true,  // 是否有音频
  hasVideo: true,  // 是否有视频
  enableStashBuffer: false,  // 禁用缓存
  enableWorker: true,  // 启用Web Worker
}, {
  reuseRedirectedURL: true,
  seekType: 'range',
  rangeLoadZeroStart: false,
  customSeekHandler: null
})

错误处理

添加错误监听提高稳定性

this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
  console.error('播放错误:', errType, errDetail)
  // 处理错误逻辑
})

this.flvPlayer.on(flvjs.Events.METADATA_ARRIVED, () => {
  console.log('元数据加载完成')
})

注意事项

FLV 播放需要服务器支持跨域

location /live {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}

对于 HTTPS 网站，FLV 流也必须使用 HTTPS 协议，否则浏览器会阻止混合内容。