Use EasyPlayer in vue to play surveillance video HLS, H265, H264

1. Use npm to download dependencies

npm  install  --save  easy-player

2. Place the EasyPlayer-lib.min.js file, EasyPlayer.wasm file, and libDecoder.wasm file under public

3. Create components, the html code is as follows

<template>
  <div class="player-box" :style="{ width: width, height: height }">
    <EasyPlayer
      style="width: 100%; height: 100%"
      :videoUrl="videoUrl"
      :showEnterprise="false"
      :show-custom-button="false"
      :autoplay="true"
    />
  </div>
</template>

4. Use props to receive data

  props: {
    // 视频地址
    videoUrl: {
      type: String,
      default: "",
    },
    // 容器id
    id: {
      type: String,
      default: "",
    },
    // 容器宽度
    width: {
      type: [Number, String],
      default: "100%",
    },
    // 容器高度
    height: {
      type: [Number, String],
      default: "100%",
    },
  },

5. Introduce it into the parent component, pass the data in props and run it