当前位置：首页 > VUE

vue实现flvvideo

2026-01-07 21:35:43VUE

vue-flv-player 实现 FLV 视频播放

安装依赖包

npm install flv.js vue-flv-player

基础组件引入

<template>
  <vue-flv-player
    :isLive="true"
    :muted="false"
    :controls="true"
    :url="flvUrl"
    @error="onPlayerError"
  />
</template>

<script>
import VueFlvPlayer from 'vue-flv-player'

export default {
  components: {
    VueFlvPlayer
  },
  data() {
    return {
      flvUrl: 'http://example.com/live.flv'
    }
  },
  methods: {
    onPlayerError(e) {
      console.error('播放器错误:', e)
    }
  }
}
</script>

自定义配置选项

设置自动播放和缓冲时间

vue实现flvvideo

<vue-flv-player
  :config="playerConfig"
  :url="flvUrl"
/>

data() {
  return {
    playerConfig: {
      enableWorker: true,
      enableStashBuffer: false,
      stashInitialSize: 128
    }
  }
}

直播流处理

处理实时直播流

<vue-flv-player
  :isLive="true"
  :hasAudio="true"
  :autoplay="true"
  :url="liveUrl"
/>

methods: {
  changeStream(newUrl) {
    this.liveUrl = newUrl
  }
}

错误处理与重连机制

实现错误处理和自动重连

vue实现flvvideo

methods: {
  onPlayerError(error) {
    console.error('播放错误:', error)
    if (error === 'NetworkError') {
      setTimeout(() => {
        this.reconnectAttempts++
        if (this.reconnectAttempts < 5) {
          this.$refs.player.reload()
        }
      }, 3000)
    }
  }
}

性能优化建议

减少内存占用配置

playerConfig: {
  lazyLoad: true,
  lazyLoadMaxDuration: 3 * 60,
  seekType: 'range'
}

跨平台兼容方案

解决移动端兼容问题

mounted() {
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
  if (isMobile) {
    this.playerConfig = {
      ...this.playerConfig,
      enableStashBuffer: true,
      stashInitialSize: 384
    }
  }
}