<style>
  /* 视频整体容器 */
  #video-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  /* 每个视频块 */
  .video-item {
    width: 300px;
  }
  .video-item video {
    width: 100%;
    display: block;
  }
</style>
<div id="video-container"></div>
<script>
  /************* 1️⃣ 你的视频列表（换成你自己的） *************/
  let videoList = [
    "https://你的域名/wp-content/uploads/2026/02/video1.mp4",
    "https://你的域名/wp-content/uploads/2026/02/video2.mp4",
    "https://你的域名/wp-content/uploads/2026/02/video3.mp4",
    "https://你的域名/wp-content/uploads/2026/02/video4.mp4"
  ];
  /************* 2️⃣ 随机打乱顺序（只做一次） *************/
  shuffle(videoList);
  let index = 0;
  let masterVideo = null;
  const container = document.getElementById("video-container");
  // 页面加载后，先放第一个视频
  addVideo();
  /************* 3️⃣ 每次新增一个视频 *************/
  function addVideo() {
    if (index >= videoList.length) return;
    const video = document.createElement("video");
    video.src = videoList[index];
    video.autoplay = true;
    video.muted = true;        // 自动播放必须
    video.loop = true;
    video.playsInline = true;
    const div = document.createElement("div");
    div.className = "video-item";
    div.appendChild(video);
    container.appendChild(div);
    // 第一个视频是“主时间轴”
    if (!masterVideo) {
      masterVideo = video;
    } else {
      // 新视频与第一个视频时间同步
      video.addEventListener("loadedmetadata", () => {
        video.currentTime = masterVideo.currentTime;
        video.play();
      });
    }
    index++;
  }
  /************* 4️⃣ 鼠标滚轮触发 *************/
  window.addEventListener("wheel", () => {
    addVideo();
  });
  /************* 5️⃣ 洗牌函数（随机顺序） *************/
  function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
  }
</script>