vue中使用EasyPlayer播放监控视频HLS,H265、H264

1.使用npm下载依赖

npm  install  --save  easy-player

2.将EasyPlayer-lib.min.js文件、EasyPlayer.wasm文件、libDecoder.wasm文件放置到public下

3.创建components,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.在父组件中引入,传递props中的数据即可运行即可

猜你喜欢

转载自blog.csdn.net/m0_65209474/article/details/134166303