Vue3 实现 视频会议九宫格 双击放大缩小(会议界面)

<template>
  <div class="video-conference">
    <!-- Main Video Grid -->
    <div class="main-grid">
      <div
          v-for="(video, index) in mainGridVideos"
          :key="index"
          class="video-box"
          :class="{ 'enlarged': video.enlarged }"
          @dblclick="toggleSideVideos(video)"
      >
        <video :src="video.src" controls></video>
        <span class="video-name">{{ video.name }}</span>
      </div>
    </div>

    <!-- Right Side Videos -->
    <div class="side-videos">
      <div v-if="sideVideos.length > 0">
        <div v-for="(video, index) in sideVideos" :key="index" class="video-box" :class="{ 'enlarged': video.enlarged }" @dblclick="toggleSideVideos(video)">
          <video :src="video.src" controls></video>
          <span class="video-name">{{ video.name }}</span>
        </div>
      </div>
    </div>

    <!-- Control Panel -->
    <div class="control-panel">
      <button @click="toggleMute">静音</button>
      <button @click="toggleVideo">视频</button>
      <button @click="openSettings">设置</button>
      <button @click="leaveMeeting">离开</button>
      <button @click="endMeeting">结束会议</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const videos = ref([
      { name: '视频 1', src: 'video1.mp4', enlarged: false },
      { name: '视频 2', src: 'video2.mp4', enlarged: false },
      { name: '视频 3', src: 'video3.mp4', enlarged: false },
      { name: '视频 4', src: 'video4.mp4', enlarged: false },
      { name: '视频 5', src: 'video5.mp4', enlarged: false },
      { name: '视频 6', src: 'video6.mp4', enlarged: false },
      { name: '视频 7', src: 'video7.mp4', enlarged: false },
      { name: '视频 8', src: 'video8.mp4', enlarged: false },
      { name: '视频 9', src: 'video9.mp4', enlarged: false },
      // Add more video sources as needed
    ]);

    const mainGridVideos = ref(videos.value.slice(0, 9));
    const sideVideos = ref([]);

    const toggleSideVideos = (video) => {
      const isEnlarged = video.enlarged;

      // 如果双击的视频已经是放大状态，再次双击时恢复到九宫格布局
      if (isEnlarged) {
        video.enlarged = false;
        mainGridVideos.value = videos.value.slice(0, 9);
        sideVideos.value = [];
        return;
      }

      // 先找到之前放大的视频，将其恢复到右侧列表
      const previouslyEnlargedVideo = mainGridVideos.value.find((v) => v.enlarged);
      if (previouslyEnlargedVideo) {
        previouslyEnlargedVideo.enlarged = false;
        sideVideos.value.push(previouslyEnlargedVideo);
        mainGridVideos.value = videos.value.filter((v) => v !== previouslyEnlargedVideo);
      }

      // 将当前双击的视频放大到主视频网格
      video.enlarged = true;
      mainGridVideos.value = [video];
      sideVideos.value = videos.value.filter((v) => v !== video);
    };

    const toggleMute = () => {
      // Toggle mute functionality
    };

    const toggleVideo = () => {
      // Toggle video functionality
    };

    const openSettings = () => {
      // Open settings functionality
    };

    const leaveMeeting = () => {
      // Leave meeting functionality
    };

    const endMeeting = () => {
      // End meeting functionality
    };

    return {
      mainGridVideos,
      sideVideos,
      toggleSideVideos,
      toggleMute,
      toggleVideo,
      openSettings,
      leaveMeeting,
      endMeeting
    };
  }
};
</script>

<style scoped>
.video-conference {
  display: grid;
  grid-template-rows: 1fr 1fr auto;
  grid-template-columns: 1fr auto;
  grid-gap: 10px;
  height: 100vh;
}

.main-grid {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.side-videos {
  grid-column: 2;
  grid-row: 1 / span 1; /* 这使得右侧视频区域延伸至第二行，和主视频网格对齐 */
  overflow-y: auto; /* 当内容超出时显示滚动条 */
  max-height: 100%; /* 限制最大高度，确保内容超出时能滚动 */
}

.video-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.video-name {
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 5px;
  border-radius: 5px;
}


.video-box video {
  width: 100%;
  height: 100%;
}

.enlarged {
  grid-column: 1 / span 3;
  grid-row: 1;
  margin-right: -10px;
}

.control-panel {
  grid-column: 1 / span 2;
  grid-row: 3;
  display: flex;
  justify-content: space-around;
}

.video-box video::-webkit-media-controls-panel {
  display: none !important; /* 隐藏 Chrome 的默认控制面板 */
}
</style>

废话不多说  直接上代码