视频详情v2

ZZJ

2021-11-08 e80763e664be64ea36ba367c15c615df78d77aa7

 src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue

@@ -6,9 +6,10 @@
      <div class="video-area">
        <!-- 播放器区域 -->
        <div class="players" ref="playerWrap">
          <div class="single"></div>
          <template v-if="guid == 1">
            <div
              class="video-item"
              class="video-item single"
              :ref="`gridVideoItem_${index}`"
              v-for="(item, index) in videoWrapArr"
              :key="item.id"
@@ -16,11 +17,11 @@
              <div style="display: none"></div>
              <div class="currentPlayer">
                <ali-player
                  @pause="isStop = true"
                  @play="isStop = false"
                  @pause="singlePause"
                  @play="singlePlay"
                  @timeupdate="timeUpdate"
                  :source="curVideo.VideoPath | fixPath"
                  :markers="curVideo.marks"
                  :markers="marks_filter"
                  :ref="`player_${curVideo.id}`"
                />
              </div>
@@ -50,7 +51,7 @@
                  <ali-player
                    @timeupdate="timeUpdate(e, index)"
                    :source="videoArrs[index].VideoPath | fixPath"
                    :markers="videoArrs[index].marks"
                    :markers="marks_filter_arr[index].marks"
                    @pause="isStop = true"
                    @play="isStop = false"
                    :ref="`player_${videoArrs[index].id}`"
@@ -65,7 +66,7 @@
            <div class="progress-bar">
              <el-tooltip
                placement="top"
                v-for="(item, index) in eventMarks"
                v-for="(item, index) in eventMarks_filter"
                :key="item.offset + index"
              >
                <div slot="content">
@@ -495,18 +496,24 @@
    curTime(newVal) {
      this.curPlayTime = this.getTimeStr(newVal);
    },
    /*  showHand() {
      let arr = this.videoArrs.map((item) => {
        item.marks = item.marks.filter((mark) => {
          console.log(mark.text);
          return mark.text != "手比: 手比";
        });
      });
      console.log(arr);
    }, */
  },
  mounted() {
    setTimeout(() => {
      console.log(this.yinhuanArr);
    }, 1000);
    this.renderLabelOpts();

    this.setGuid(1);

    this.getCurVideos(this.videoDetails);

    this.getRelatedVideos(this.videoDetails);
    // this.getRelatedVideos(this.videoDetails);
  },
  destroyed() {
    this.videoArrs.length = 0;
@@ -565,7 +572,7 @@
      this.progressChange(this.curTime);
    },
    progressChange(val) {
      this.showPlayBtn = false;
      this.showPlayBtn = true;
      let that = this;
      if (this.guid == 1) {
        this.$refs[`player_${this.curVideo.id}`][0].pause();
@@ -578,6 +585,7 @@
      } else {
        this.videoArrs.forEach((v, i) => {
          this.$refs[`player_${v.id}`][0].seek(val);
          this.$refs[`player_${v.id}`][0].pause();
          if (i == 0) {
            let curT = this.$refs[`player_${v.id}`][0].getCurrentTime();
          }
@@ -741,6 +749,8 @@
        console.log(this.$refs);
      });
    },

    // 分窗口
    setGuid(guid) {
      let _this = this;
      this.guid = guid;
@@ -748,6 +758,7 @@
        this.showLocChoise = true;
      } else {
        this.showLocChoise = false;
        console.log(this.$refs[`player_${this.curVideo.id}`]);
        this.$refs[`player_${this.curVideo.id}`][0].pause();
        this.$refs[`player_${this.curVideo.id}`][0].seek(0);
      }
@@ -892,14 +903,20 @@
    closeHand() {
      this.showHand = false;
    },
    singlePause() {
      this.isStop = true;
      this.showPlayBtn = true;
    },
    singlePlay() {
      this.isStop = false;
      this.showPlayBtn = false;
    },
  },
  computed: {
    yinhuanArr() {
      console.log(this.curVideo.IsOperate);
      if (this.curVideo.IsOperate == 0) {
        return [];
      }
      console.log(this.eventMarks);
      return this.eventMarks.filter((x) => {
        return (
          (x.text.indexOf("进出站") > -1 ||
@@ -908,6 +925,47 @@
          x.state == 0
        );
      });
    },
    marks_filter() {
      if (this.showHand) {
        return this.curVideo.marks;
      } else
        return this.curVideo.marks.map((item) => {
          if (item.text != "手比: 手比") {
            return item;
          }
        });
    },
    marks_filter_arr() {
      if (this.showHand) {
        return this.videoArrs;
      } else {
        let arr = this.videoArrs.map((item) => {
          let obj = { ...item };
          let temp = [];
          obj.marks.forEach((mark) => {
            if (mark.text != "手比: 手比") {
              temp.push(mark);
            }
          });
          obj.marks = temp;
          return obj;
        });
        return arr;
      }
    },
    eventMarks_filter() {
      if (this.showHand) {
        return this.eventMarks;
      } else {
        let arr = [];
        this.eventMarks.map((item) => {
          if (item.text != "手比: 手比") {
            arr.push(item);
          }
        });
        return arr;
      }
    },
  },
};
@@ -1033,6 +1091,11 @@
        display: flex;
        flex-wrap: wrap;
        height: 512px;
        .single {
          .prism-controlbar {
            display: none !important;
          }
        }
        .video-item {
          background: black;
          box-sizing: border-box;
@@ -1508,4 +1571,19 @@
    }
  }
}
.el-tooltip__popper {
  * {
    color: #fff;
  }
}

.prism-marker-text {
  p {
    color: #fff;
  }
}

.video-box-top b {
  color: #fff;
}
</style>