vue封装video组件（基于flv）

---

一、安装依赖

npm install flv.js --save 

二、videoFlv.vue子组件封装

<template>
  <div class="videoFlv">
    <video controls autoplay="autoplay" muted="muted" ref="videoFlv" :id="v_id">
      <source type="video/mp4" />
    </video>
  </div>
</template>

<script>
import * as flvjs from "flv.js";
export default {
  props: {
    videoSrc: {
      type: String,
      default: "",
    },
    v_id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      //声明两个变量
      player: null,
      flvPlayer: null,
    };
  },
  watch: {
    videoSrc: {
      handler() {
        this.videoInit();
      },
      deep: true,
    },
  },
  mounted() {
    this.videoInit();
  },
  methods: {
    //页面初始化
    videoInit() {
      if (flvjs.default.isSupported()) {
        // 获取DOM对象
        this.player = document.getElementById(this.v_id);
        // 创建flvjs对象
        this.flvPlayer = flvjs.default.createPlayer({
          type: "mp4", // 指定视频类型 flv或者mp4等  我的视频源是mp4,根据你的来
          isLive: true, // 开启直播
          hasAudio: false, // 关闭声音
          cors: true, // 开启跨域访问
          url: this.videoSrc, // 指定流链接
        });
        // 将flvjs对象和DOM对象绑定
        this.flvPlayer.attachMediaElement(this.player);
        this.flvPlayer.load(); // 加载视频
        this.flvPlayer.play(); // 播放
      }
    },
    videoDestroy() {
      if (this.flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        // 卸载DOM对象
        this.flvPlayer.detachMediaElement();
        // 销毁flvjs对象
        this.flvPlayer.destroy();
      }
    },
  },
  destroyed() {
    this.videoDestroy();
  },
};
</script>

<style scoped lang="scss">
.videoFlv {
  width: 100%;
  height: 100%;
  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}
</style>

三、父组件调用

<template>
  <div class="videoBox">
    <VideoFlv :v_id="v_id"
              :videoSrc="videoSrc" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      v_id: "video1",
      videoSrc: "https://www.w3schools.com/html/movie.mp4"
    };
  },
  components: {
    VideoFlv: () => import("@/components/video/videoFlv.vue")
  },
};
</script>

<style scoped lang="scss">
.videoBox {
  width: 100vw;
  height: 100vh;
}
</style>

</style>

四、效果展示

总结

一直在不断前进，如有问题，请各位看官指出，相互交流学习。