如何在现有弹窗视频代码中添加多按钮实现不同视频弹窗？

下面是修改后的完整代码，支持添加任意数量的按钮，每个按钮点击后弹窗播放对应视频：

HTML #

<!-- 多个视频按钮，通过data-video-src指定对应视频链接 -->
<button class="video-btn" data-video-src="/video/Hacksaw Ridge video.mp4">播放视频1</button>
<button class="video-btn" data-video-src="/video/Another Video.mp4">播放视频2</button>
<button class="video-btn" data-video-src="/video/Third Video.mp4">播放视频3</button>

<!-- 复用的弹窗容器 -->
<dialog class="video-modal">
  <video class="modal-video" controls></video>
  <button class="modal-close">关闭弹窗</button>
</dialog>

CSS #

.video-modal {
  background: rgba(0, 0, 0, 0);
  border: 0;
}

.video-modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.modal-video {
  border: 2px solid wheat;
  max-width: 90vw;
  max-height: 80vh;
}

/* 按钮基础样式（可选） */
.video-btn {
  margin: 0 10px 10px 0;
  padding: 8px 16px;
  cursor: pointer;
}

.modal-close {
  margin-top: 10px;
  padding: 6px 12px;
  cursor: pointer;
}

JavaScript #

// 获取核心元素
const videoModal = document.querySelector('.video-modal');
const modalVideo = document.querySelector('.modal-video');
const closeBtn = document.querySelector('.modal-close');
const videoButtons = document.querySelectorAll('.video-btn');

// 给每个视频按钮绑定点击事件
videoButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 读取当前按钮对应的视频链接
    const videoSrc = button.getAttribute('data-video-src');
    // 设置视频源并播放
    modalVideo.src = videoSrc;
    modalVideo.load();
    modalVideo.play();
    // 显示弹窗
    videoModal.showModal();
  });
});

// 关闭弹窗逻辑
closeBtn.addEventListener('click', () => {
  // 暂停视频并清空源，避免下次打开残留播放状态
  modalVideo.pause();
  modalVideo.src = '';
  videoModal.close();
});

// 点击弹窗背景关闭（可选功能）
videoModal.addEventListener('click', (e) => {
  if (e.target === videoModal) {
    closeBtn.click();
  }
});

关键改动说明 #

• HTML结构优化：
  • 所有视频按钮统一使用.video-btn类，通过data-video-src属性存储对应视频链接，后续添加新按钮只需复制此结构修改链接即可
  • 复用单个弹窗容器，避免冗余DOM结构
• JavaScript逻辑重构：
  • 使用querySelectorAll批量获取所有视频按钮，通过循环绑定事件，无需为每个按钮单独写事件处理
  • 点击按钮时动态修改视频源，实现不同视频的切换播放
  • 关闭弹窗时重置视频状态，避免下次打开弹窗自动播放之前的视频
• CSS增强：
  • 给视频添加宽高限制，避免视频超出视口范围
  • 给按钮添加基础样式，提升交互体验

内容的提问来源于stack exchange，提问作者Catalin