1. 首先下載flv.js

npm install flv.js

2. 創(chuàng)建一個(gè)頁(yè)面乒疏，用來(lái)組件化：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>視頻播放錯(cuò)誤蓖议，請(qǐng)聯(lián)系管理員！</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%");
    // 頁(yè)面加載完成后即寡，初始化
    this.$nextTick(() => {
      this.init(this.url);
    });
  },
  methods: {
    // 初始化
    init(source) {
      if (flvjs.isSupported()) {
        this.flvPlayer = flvjs.createPlayer(
          {
            type: "flv",
            url: source,
          },
          {
            enableWorker: false, //不啟用分離線程
            enableStashBuffer: false, //關(guān)閉IO隱藏緩沖區(qū)
            reuseRedirectedURL: true, //重用301/302重定向url徊哑，用于隨后的請(qǐng)求，如查找聪富、重新連接等莺丑。
            autoCleanupSourceBuffer: true, //自動(dòng)清除緩存
          }
        );

        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() {
      // 傳入開關(guān)值
      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. 在需要的頁(yè)面引入

<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>