1，新建一个EasyWasmPlayer.vue。里面如下

<template>
  <div class="player-box" :style="{ width: width, height: height }">
    <div :id="id"></div>
  </div>
</template>

<script>
export default {
  name: "Player",
  props: {
    //页面传递的地址
    videoUrl: {
      type: String,
      default: "",
    },
    //页面传递id
    id: {
      type: String,
      default: "",
    },
    width: {
      type: [Number, String],
      default: "100%",
    },
    height: {
      type: [Number, String],
      default: "100%",
    },
  },
  data() {
    return {
      player: null,
      videoMonitorPath: null,
      timers: null,
      hlsDownAddress: null,
    };
  },
  mounted() {
    let _this = this;
    this.hlsDownAddress = this.videoUrl;
    this.timers = setTimeout(() => {
      _this.getVideo2();
    }, 1000);
  },
  beforeDestroy() {
    this.timers = null;
    if (this.player) this.player.destroy(); // 关闭控件
    this.player = null;
    this.hlsDownAddress = null;
  },
  methods: {
    getVideo2() {
      this.player = new WasmPlayer(null, this.id);
      this.player.play(this.hlsDownAddress, 1);
    },
  },
};
</script>

<style>
.player-box {
  border: 1px solid #144a83;
}
</style>

2，父级页面使用,在自己使用的地方引用即可。安装的的EasyWasmPlayer安装的的EasyWasmPlayer.js

 <SupVideoPlayer
            width="100%"
            height="100%"
            :id="'xxx'"
            :videoUrl="'xxx'"
            ref="supPlayer"
          >
          </SupVideoPlayer>