vue封装video组件（基于chimee）

---

一、安装依赖

npm i chimee chimee-kernel-hls --save

二、videoCm.vue子组件封装

<template>
  <div class="wrapper"
       :id="wid"></div>
</template>
<script>
import Chimee from "chimee";
import ChimeeKernelHls from "chimee-kernel-hls";
export default {
  data () {
    return {
      chimee: null,
    };
  },
  props: {
    // 唯一id
    wid: {
      type: String,
      default: "wapper",
    },
    // 视频源地址
    videoSrc: {
      type: String,
      default: "",
      require: true
    },
  },
  methods: {
    init () {
      let config = {
        wrapper: `#${this.wid}`, //dom对象
        src: this.videoSrc, // 视频路径
        controls: true, // 播放控件
        autoplay: true, // 自动播放
        muted: true, // 静音
        loop: true, // 循环
        kernels: {
          hls: {
            handler: ChimeeKernelHls,
          },
        },
      };
      this.chimee = new Chimee(config);
    },
  },
  // 销毁实例
  beforeDestroy () {
    this.chimee.stopLoad();
  },
  destroyed () {
    this.chimee = null;
  },
  watch: {
    videoSrc (newVal) {
      if (this.chimee != null) {
        this.chimee.load(newVal);
      } else {
        this.init();
      }
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.init();
    });
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  ::v-deep video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}
</style>

三、父组件调用

<template>
  <div class="videoBox">
    <VideoCm :wid="wid"
             :videoSrc="videoSrc" />
  </div>
</template>

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

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

四、效果展示

总结

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