감시 비디오 HLS, H265, H264를 재생하려면 EasyPlayer를 사용하십시오.

1. npm을 사용하여 종속 항목 다운로드

npm  install  --save  easy-player

2. EasyPlayer-lib.min.js 파일, EasyPlayer.wasm 파일, libDecoder.wasm 파일을 public 폴더에 둡니다.

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를 사용하여 데이터 수신

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

5. 이를 상위 구성 요소에 도입하고 소품에 데이터를 전달한 후 실행합니다.