Vue 项目要求播放flv的直播视频，实现功能记录。使用到的插件flvjs

插件文档地址

插件文档地址

使用封装

<flv :poster="videoimg" :controls="false" :src="item.data"></flv>

组件封装

/**
* @Author: 858834013@qq.com
* @Name: flv
* @Date: 2022-07-13
* @Desc:
*/
<template>
  <div class="videoBody">
    <video :poster="poster" :controls="controls" ref="videoElement" id="videoElement"></video>
  </div>
</template>

<script>
import flvjs from 'flv.js'

export default {
  name: "flv",
  components: {},
  props: {
    src: {
      type: String,
      default() {
        return '';
      }
    },
    controls: {
      type: Boolean,
      default() {
        return true
      }
    },
    poster: {
      type: String,
      default() {
        return ''
      }
    },
  },
  data() {
    return {
      flvPlayer: null,
      isPlay: false,
    }
  },
  watch: {},
  mounted() {
    this.getPlay()
  },
  methods: {
    getPlay() {
      if (flvjs.isSupported()) {
        var videoElement = this.$refs.videoElement
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: this.src
        })
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
      }
    },
    play() {
      this.isPlay = true
      this.flvPlayer.play()
    },
    pause() {
      this.isPlay = false
      this.flvPlayer.pause()
    },
  }
}
</script>

<style lang="scss" scoped>
.videoBody {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
<style>
video {
  width: 100%;
  position: relative;
  height: 100%;
}
</style>