点位管理视频加载

luobisheng

2022-12-09 cc2df46ba6192b1541b976cb992e2ea3f76b8fc7

点位管理视频加载

 src/views/systemSetting/device/point/index.vue

@@ -50,12 +50,13 @@
            class="video-js vjs-default-skin"
            controls
            preload="auto"
            width="300px"
            height="300px"
            width="240px"
            height="200px"
            type="video/mp4"
            :src="item.urlAddress"
          >
          </video>
          <div @click="loadVideo(item)" class="button-div">查看视频</div>
        </div>
      </el-main>
      <el-footer>
@@ -112,15 +113,12 @@
            this.totalNum = total;
          })
          .catch((err) => this.$message.error(err));
      this.setVideo();
    },
    setVideo() {
    loadVideo(data) {
      if (Hls.isSupported()) {
        this.videoData.forEach(video => {
          const videoPlayer = document.getElementById(video.id);
          this.hls.loadSource(video.urlAddress);
          this.hls.attachMedia(videoPlayer);
        })
        const videoPlayer = document.getElementById(data.id);
        this.hls.loadSource(data.urlAddress);
        this.hls.attachMedia(videoPlayer);
      }
    },
    selectedDepartment(data) {
@@ -200,6 +198,17 @@
  cursor: pointer;
}

.button-div {
  color: rgb(75, 155, 183);
  position: absolute;
  height: 30px;
  line-height: 30px;
  width: 100%;
  margin-left: 20px;
  cursor: pointer;
  border: 1px solid rgb(75, 155, 183);
}

.el-pagination {
  &::v-deep li,
  &::v-deep .btn-prev,