Используйте EasyPlayer в vue для воспроизведения видео наблюдения HLS, H265, H264.

1. Используйте npm для загрузки зависимостей.

npm  install  --save  easy-player

2. Поместите файл EasyPlayer-lib.min.js, файл EasyPlayer.wasm и файл libDecoder.wasm в общедоступный каталог.

3. Создаём компоненты, html-код следующий

<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. Используйте реквизит для получения данных

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

5. Внедряем его в родительский компонент, передаем данные в реквизиты и запускаем.