vue+flv.js 播放器播放flv视频流

1.安装flv.js依赖

npm install --save flv.js

2.播放组件FlvPlayComponent.vue

<template>
  <video ref="videoRef" autoplay :controls="controls" :muted="muted" @dblclick="screenfullHandler()" />
</template>

<script>
import screenfull from 'screenfull'
import flvjs from 'flv.js/dist/flv.min.js'

export default {
  name: 'FlvPlayComponent',
  props: {
    webrtcUrl: {
      require: true,
      default: () => ''
    },
    fullscreenDom: {
      default() {
        return this.$refs.videoRef
      }
    },
    muted: {
      type: Boolean,
      default: false
    },
    controls: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isFullscreen: false,
      flvPlayer: null
    }
  },
  watch: {
    webrtcUrl() {
      this.webrtcPlay()
    }
  },
  mounted() {
    screenfull.on('change', this.screenfullChange)
    this.webrtcUrl && this.webrtcPlay()
  },
  beforeDestroy() {
    screenfull.off('change', this.screenfullChange)
    this.destoryVideo()
  },
  methods: {
    screenfullChange() {
      this.isFullscreen = screenfull.isFullscreen
    },
    screenfullHandler() {
      if (this.isFullscreen) {
        screenfull.exit()
      } else {
        screenfull.request(this.fullscreenDom || this.$refs.videoRef)
      }
    },
    async webrtcPlay() {
      if (flvjs.isSupported()) {
        if (this.flvPlayer) {
          this.flvPlayer.pause()
          this.flvPlayer.unload()
          this.flvPlayer.detachMediaElement()
          this.flvPlayer.destroy()
        }
        this.flvPlayer = flvjs.createPlayer(
          {
            type: 'flv',
            url: this.webrtcUrl
          },
          {
            cors: true,  //是否跨域
            enableWorker: true,  //是否多线程工作
            anableStashBuffer: false,  //是否启用缓存
            stashInitialSize: 128,  //缓存大小(kb) 默认384kb
            autoCleanupSourceBuffer: true  //是否自动缓存
          }
        )
        this.flvPlayer.attachMediaElement(this.$refs.videoRef)
        this.flvPlayer.load()
        this.flvPlayer.play()
        //报错重连
        this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
          console.log('errType:', errType)
          console.log('errorDetail:', errDetail)
          if(this.flvPlayer){
            this.destoryVideo()
            this.webrtcPlay()
          }
        })
      }
    },
    destoryVideo() {
      if (this.flvPlayer) {
        this.flvPlayer.pause()
        this.flvPlayer.unload()
        this.flvPlayer.detachMediaElement()
        this.flvPlayer.destroy()
        this.flvPlayer = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>