vue使用flv視頻監控組件

先安裝flv包:親測這個版本可行： "flv.js": "^1.5.0"

<template>
  <div>
    <video id="videoElement" controls autoplay muted width="100%"></video>
  </div>
</template>

<script>
import flvjs from 'flv.js'
export default {
  data() {
    return {
      flvPlayer: null
    }
  },
  mounted() {
    this.getUrl()
  },
  methods: {
    getUrl() {
      this.initVideo('http://1011.hlsplay.aodianyun.com/demo/game.flv')
    },

    initVideo(url) {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement')
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasAudio: false,
          // url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
          url: url
        })
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    }
  },

  beforeDestroy() {
    //銷毀事件
    this.flvPlayer.pause()
    this.flvPlayer.unload()
    this.flvPlayer.detachMediaElement()
    this.flvPlayer.destroy()
    this.flvPlayer = null
  }
}
</script>