app-AgricultureSmart/vue/src/components/viewMonitor.vue

<template>
  <div class="monitor" :style="{ height: height + 'px', width: width + 'px' }" >
    <div class="main-video">
      <video
          :src="selectedVideo"
          controls
          @play="handlePlay"
          :width="width*2/3"
          :height="height*2/3"
          autoplay
      ></video>
<!--{{selectedVideo}}-->
    </div>
    <div class="video-list">
      <div
          v-for="(video, index) in videoList"
          :key="index"
          class="video-item"
          :class="{ active: video === (selectedVideo || videoList[0]) }"
          @click="selectVideo(video)"
      >
        <img :src="imgList[index]" alt="" />
        <div class="video-title">{{ getTitleFromPath(video) }}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "viewMonitor",
  props: {
    height: {
      type: Number,
      default: 800,
    },
    width: {
      type: Number,
      default: 1200,
    },
  },
  data() {
    return {
      videoList: [require("../assets/video/monitor1.mp4"), require("../assets/video/GrassMontior.mp4")],
      imgList: [
        require("../assets/imgs/bg.jpg"),
        require("../assets/imgs/bg.jpg"),
      ],
      selectedVideo: require("../assets/video/monitor1.mp4"),//没用
    };
  },
  methods: {
    selectVideo(video) {
      this.selectedVideo = video;
    },
    getTitleFromPath(path) {
      return path.split("/").pop().split(".")[0];
    },
    handlePlay() {
      // 可以在这里实现其他功能,如统计播放次数等
    },
  },
};
</script>

<style>
.monitor {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.main-video {
  width: 70%;
  max-width: 2000px;
}

.video-list {
  transform: translateY(10%);
  width: 30%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.video-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  cursor: pointer;
}

.video-item.active {
  opacity: 0.5;
}

.video-item img {
  width: 100px;
  height: 60px;
  object-fit: cover;
}

.video-title {
  font-weight: bold;
  flex: 1;
  text-align: left;
}
</style>