Vue 中使用flv.js视频播放器，并将其组件化

1. 首先下载flv.js

npm install flv

2. 创建一个页面，用来组件化：assembly-flv.vue

<template>
  <div class="video" :style="{ height: voidHeight }">
    <video ref="videoElement" muted></video>
    <div class="img_error" v-if="imgError">
      <img src="../assets/image/wushipin_lan_da.png" alt="" />
      <p>视频播放错误，请联系管理员！</p>
    </div>
  </div>
</template>

<script>
import flvjs from "flv.js";
// import wushipin_lan_da from '../assets/image/wushipin_lan_da.png';
export default {
  name: "assemblyFlv",
  props: ["url", "height", "destroy"], // 视频流路径，播放器高度，是否销毁播放器
  data() {
    return {
      flvPlayer: "",
      imgError: false,
      voidHeight: "",
    };
  },
  mounted() {
    // 判断是否传入高度，如果没有，高度100%
    this.height ? (this.voidHeight = this.height) : (this.voidHeight = "100%");
    // 页面加载完成后，初始化
    this.$nextTick(() => {
      this.init(this.url);
    });
  },
  methods: {
    // 初始化
    init(source) {
      if (flvjs.isSupported()) {
        this.flvPlayer = flvjs.createPlayer(
          {
            type: "flv",
            url: source,
          },
          {
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
            autoCleanupSourceBuffer: true, //自动清除缓存
          }
        );

        this.flvPlayer.attachMediaElement(this.$refs.videoElement);
        this.flvPlayer.load();
        this.flvPlayer.play();

        // 加载完成
        this.flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
          this.imgError = false;
        });

        // 加载失败
        this.flvPlayer.on(
          flvjs.Events.ERROR,
          () => {
            this.imgError = true;
          },
          (error) => {
            console.log(error);
          }
        );
      } else {
        this.imgError = true;
      }
    },
    // 销毁
    detachMediaElement() {
      this.flvPlayer.pause();
      this.flvPlayer.unload();
      this.flvPlayer.detachMediaElement();
      this.flvPlayer.destroy();
      this.flvPlayer = "";
    },
  },
  watch: {
    url() {
      this.imgError = false;
      // 切换流之前，判断之前的流是否销毁
      this.flvPlayer == "" ? "" : this.detachMediaElement();
      // 初始化
      this.init(this.url);
    },
    destroy() {
      // 传入开关值
      if (this.destroy) {
        this.init(this.url);
      } else {
        this.flvPlayer == "" ? "" : this.detachMediaElement();
      }
    },
  },
  beforeDestroy() {
    this.detachMediaElement();
  },
};
</script>

<style scoped>
.video {
  position: relative;
  height: 100%;
}
video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.img_error {
  position: absolute;
  top: 30%;
  left: 50%;
  margin-left: -120px;
  text-align: center;
}
.img_error > img {
  margin-bottom: 1em;
}
.img_error > p {
  color: #00fdff;
  font-weight: bold;
  font-size: 1.2em;
}
</style>

3. 在需要的页面引入

<template>
  <div>
      <assembly-flv height="240px" :url="url" ></assembly-flv>
  </div>
</template>

<script>
import assemblyFlv from "assembly-flv.vue";
export default {
  components: { "assembly-flv": assemblyFlv },
  data() {
     return {
         url: '视频流'
     }
  }
}
</script>