---

title: FLV视频流播放 lang: zh display: home description: FLV视频流播放 image: https://picsum.photos/536/354?random&date=2021-04-12 date: 2019-09-21 tags:

• 视频播放 categories:
• 技术

---

FLV视频流播放

• 1.直接使用flv.js进行播放

1.直接使用flv.js进行播放

<template>
   <video id="player" ref="player" class="demo-video" muted autoplay></video>
</template>
<script>
import flvjs from 'flv.js'

export default {

  data() {
    return {
      avcConfig: null,
      hasAudio: false,
      id: '1',
      reLoadTimes: 0,
      rtsp: 'rtsp://192.168.0.111:554/av1_1，',
      player: null
    }
  },
  
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.destroyPlayer()
  },
  methods: {
    init() {
      this.destroyPlayer()
      if (flvjs.isSupported()) {
        const video = this.$refs.player
        this.videoElement = document.getElementById('player')

        if (video) {
          this.player = flvjs.createPlayer({
            hasAudio: true,
            type: 'flv',
            isLive: true,
            url: this.detailForm.pullUrl,
            enableStashBuffer: false
          })
          this.player.attachMediaElement(video)
          try {
            this.player.load()
            this.player.play()
          } catch (error) {
          }
          this.player.on(flvjs.Events.ERROR, (e) => {
            console.log('flvjs.Events.ERROR')
            // destroy
            this.destroyPlayer()

            // 进行重建的逻辑，这里不再展开
            setTimeout(() => {
              this.reLoadTimes++
              this.reLoadTimes < 10 ? this.init() : ''
            }, 1000)
          })
          this.videoElement.addEventListener('progress', () => {
            const end = this.player.buffered.end(0) // 获取当前buffered值(缓冲区末尾)
            const delta = end - this.player.currentTime // 获取buffered与当前播放位置的差值
            // 延迟过大，通过跳帧的方式更新视频
            if (delta > 3 || delta < 0) {
              this.player.currentTime = this.player.buffered.end(0) - 1
              return
            }

            // 追帧
            if (delta > 1) {
              this.videoElement.playbackRate = 1.1
            } else {
              this.videoElement.playbackRate = 1
            }
          })

          this.player.on(flvjs.Events.METADATA_ARRIVED, (data) => {
            console.log(222222222333333333, 'METADATA_ARRIVED', data)
            // if (this.avcConfig) {
            //   this.init()
            // } else {
            //   this.avcConfig = data
            // }
          })
          this.player.on(flvjs.Events.MEDIA_INFO, (data) => {
            console.log(444444, 'MEDIA_INFO', data)
            if (this.avcConfig) {
              setTimeout(() => {
                this.init()
              })
            } else {
              this.avcConfig = data
            }
          })
        }
      }
    },
    changHasAudio() {
      this.hasAudio = !this.hasAudio
      if (this.hasAudio) {
        document.getElementById('player').muted = false
      } else {
        document.getElementById('player').muted = true
      }
    },
    destroyPlayer() {
      this.avcConfig = null
      if (this.player) {
        // this.player.pause()
        this.player.unload()
        this.player.detachMediaElement()
        this.player.destroy()
        this.player = null
      }
    }

  }
}
</script>