flv.js使用记录

目前主流浏览器不能直接嵌入并且播放FLV文件，所以在网上找到开源插件flv.js并封装组件以便使用
首先创建vue插件，在mounted的时候使用$nextTick创建flvPlayer对象
然后监听url防止url未获取就初始化

<template>
  <video
    class="video-component"
    ref="videoElement"
    controls
    autoplay
  >当前浏览器不支持HTML5 video。</video>
</template>
<script>
import flvjs from "flv.js";

export default {
  name: "FVideo",
  props: {
    types: {
      type: String,
      default: "flv"
    },
    url: {
      types: String,
      default: ""
    }
  },
  data() {
    return {
      flvPlayer: null
    };
  },
  watch: {
    url() {
      if (this.flvPlayer) {
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
      }
      this.createVideo();
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.createVideo();
    });
  },
  methods: {
    createVideo() {
      const videoElement = this.$refs.videoElement;
      this.flvPlayer = flvjs.createPlayer({
        type: this.types,
        url: this.url
      });
      this.flvPlayer.attachMediaElement(videoElement);
      try {
        this.flvPlayer.load();
        this.flvPlayer.play();
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

<style scoped>
.video-component {
  width: 100%;
  max-height: 100%;
}
</style>

最后使用插件即可

<FVideo v-if="url" :url="url" types="flv" autoplay playsinline controls class="fvideo" />