本文详细介绍了如何使用一套可扩展的javascript解决方案，实现页面上多个视频通过单个模态框（`

`元素）进行播放的管理。通过动态加载视频源、统一的事件处理机制以及播放列表导航功能，避免了为每个视频创建独立模态框的冗余代码，极大地提升了代码的可维护性和用户体验。

在现代Web开发中，展示多个视频内容并提供模态框播放体验是常见的需求。然而，为每个视频单独编写一套打开模态框、播放视频、关闭模态框的JavaScript代码，会导致代码冗余、难以维护，尤其当视频数量众多时。本教程将引导您构建一个高效、可扩展的解决方案，利用单个模态框和动态内容加载机制来管理所有视频的播放。

核心思想

本方案的核心在于“单一模态框，动态内容”。我们不再为每个视频创建独立的HTML模态框结构，而是使用一个通用的模态框元素。当用户点击某个视频的播放按钮或链接时，JavaScript会捕获这个事件，根据被点击的视频信息动态地更新模态框内视频播放器的src和poster属性，然后显示模态框并开始播放。同时，我们还将引入播放列表导航功能，允许用户在模态框内切换不同的视频。

HTML结构

为了实现上述功能，我们需要定义一个视频播放列表以及一个通用的模态框。这里我们使用HTML5的<dialog>元素作为模态框，它提供了原生的模态框行为。

<!-- 视频播放列表 -->
<ol class="playlist">
  <a href="#" id="0"><b>40</b> Seconds</a>
  <a href="#" id="1"><b>11</b> Seconds</a>
  <a href="#" id="2"><b>08</b> Seconds</a>
</ol>

<!-- 通用视频播放模态框 -->
<dialog class="scroll">
  <form id="ui" method="dialog">
    <fieldset class="content">
      <legend>
        <input class="btn" type="submit" value="⨯"> <!-- 关闭按钮 -->
      </legend>
      <video controls></video> <!-- 视频播放器 -->
      <fieldset class="control">
        <input id="prev" class="btn" type="button" value="⏮"> <!-- 上一个视频按钮 -->
        <output id="counter"></output> <!-- 当前视频索引显示 -->
        <input id="next" class="btn" type="button" value="⏭"> <!-- 下一个视频按钮 -->
      </fieldset>
    </fieldset>
  </form>
</dialog>

结构说明：

立即学习“Java免费学习笔记（深入）”；

• playlist: 一个有序列表，其中每个<a>标签代表一个视频。为了方便JavaScript识别，每个<a>标签都分配了一个唯一的id，这个id将作为视频数组的索引。
• dialog: 这是HTML5原生的模态框元素。它默认是隐藏的，可以通过JavaScript的showModal()方法显示。
• form: 模态框内部的表单，method="dialog"属性允许通过表单提交关闭模态框。
• video: 模态框内的视频播放器，其src和poster属性将由JavaScript动态设置。
• prev / next: 用于在播放列表中切换视频的按钮。
• counter: 显示当前播放视频在列表中的序号。

CSS样式

为了使模态框和播放列表具有良好的视觉效果，我们需要一些CSS样式。以下是示例样式，您可以根据自己的设计需求进行调整。

Gradle 9.8.0

下载

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font: 300 5vmin/1 "Segoe UI"
}

body {
  overflow: scroll
}

.playlist a {
  display: list-item;
  position: relative;
  width: max-content;
  color: #18272F;
  text-decoration: none;
}

.playlist a+a {
  margin-top: 0.5rem;
}

.playlist a::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.1rem;
  border-radius: 4px;
  background-color: #18272F;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.playlist a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.playlist a b {
  font-weight: 300;
  font-family: Consolas;
  font-size: 1.1rem;
}

dialog {
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: 0 10px 6px -6px #777;
}

dialog::backdrop {
  background: rgba(50, 50, 50, 0.3);
}  

#ui {
  padding: 0;
  border: 1.5px solid #bbb;
  border-radius: 5px;
  background: #eee;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 1px ridge #ddd;
  border-radius: 5px;
  font: inherit;
  font-size: 2rem;
  line-height: normal;
  background: transparent;
  cursor: pointer;  
  box-shadow: 0 6px 4px -4px #bbb;
}

.btn:hover { 
  box-shadow: 0 6px 8px -4px #999;
}

.btn:active {
  transform: scale(0.95);
}

.content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100vh;
  padding: 0 0.5rem;
  border: 0;
  background: #eee;
}

.content legend {
  width: 100%;
}

.content legend .btn {
  float: right;
  padding-bottom: 0.45rem;
  line-height: 0;
  height: 1.5rem;
  margin: 0.25rem -0.25rem 0.25rem 0;
  color: #888;
}

.control {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0.25rem;
  padding: 0;
  border: 0;
}

#prev,
#next {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  line-height: 1;
  background: #eee;
}

#counter {
  font-size: 1.15rem;
  font-family: Consolas;
  padding: 0 0.75rem;
}

video {
  width: 100%;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

JavaScript逻辑

JavaScript是实现动态视频播放和模态框交互的核心。

// 定义当前播放视频的索引
let idx = 0;

// 获取DOM元素引用
const list = document.querySelector(".playlist"); // 播放列表
const links = Array.from(list.querySelectorAll("a")); // 播放列表中的所有视频链接

// 视频文件路径和文件名数组
const path = "https://glpjt.s3.amazonaws.com/so/av/"; // 视频文件公共路径
const files = ["vs8s3", "vs21s3", "vs2s3"]; // 视频文件名（不含扩展名）

const vid = document.querySelector("video"); // 模态框内的视频播放器
const mod = document.querySelector("dialog"); // 模态框元素
const ui = document.forms.ui; // 模态框内的表单
const io = ui.elements; // 表单中的所有元素
const prv = io.prev; // 上一个视频按钮
const nxt = io.next; // 下一个视频按钮
const cnt = io.counter; // 视频计数器显示

/**
 * playList函数：根据索引加载并播放视频
 * @param {number} index - 视频在 `files` 数组中的索引
 */
function playList(index) {
  idx = index; // 更新当前视频索引
  let file = files[index]; // 获取文件名
  let mp4 = path + file + ".mp4"; // 构建MP4视频完整路径
  let png = path + file + ".png"; // 构建PNG海报完整路径

  vid.src = mp4; // 设置视频源
  vid.poster = png; // 设置视频海报
  cnt.value = idx + 1; // 更新计数器显示（从1开始）
  vid.play(); // 自动播放视频
}

/**
 * 模态框和表单的点击事件处理
 * 点击模态框背景关闭模态框，点击模态框内容阻止事件冒泡
 */
mod.onclick = e => {
  // 如果点击的是模态框本身（而不是其内部内容），则关闭模态框
  if (e.target === mod) {
    e.currentTarget.close();
    vid.pause(); // 暂停视频
  }
};
ui.onclick = e => e.stopPropagation(); // 阻止表单内部点击事件冒泡到模态框

/**
 * 为每个视频链接绑定点击事件
 * 分配每个链接一个id，作为其在播放列表中的索引
 */
links.forEach((a, i) => {
  a.id = i; // 设置链接的id为索引
  a.onclick = openModal; // 绑定点击事件处理函数
});

/**
 * openModal函数：打开模态框并加载对应视频
 * @param {Event} e - 点击事件对象
 */
function openModal(e) {
  e.preventDefault(); // 阻止链接默认行为
  mod.showModal(); // 显示模态框
  // 调用playList函数，传入被点击链接的id（转换为数字）
  playList(+this.id); 
}

// 为“上一个”和“下一个”按钮绑定点击事件
prv.onclick = reverse;
nxt.onclick = forward;

/**
 * reverse函数：播放上一个视频
 */
function reverse() {
  idx--; // 索引减一
  // 如果索引小于0，则循环到列表末尾
  idx = idx < 0 ? files.length - 1 : idx; 
  playList(idx); // 加载并播放新视频
}

/**
 * forward函数：播放下一个视频
 */
function forward() {
  idx++; // 索引加一
  // 如果索引超出列表末尾，则循环到列表开头
  idx = idx > files.length - 1 ? 0 : idx; 
  playList(idx); // 加载并播放新视频
}

JavaScript逻辑说明：

1. 初始化变量:
   • idx: 当前播放视频的索引，初始为0。
   • list, links: 获取播放列表容器和所有视频链接元素。
   • path, files: 定义视频文件路径和文件名数组。files数组中的每个元素对应一个视频。
   • vid, mod, ui, io, prv, nxt, cnt: 获取模态框、视频播放器、导航按钮等关键DOM元素的引用。
2. playList(index)函数:
   • 这是核心函数，负责根据传入的index参数来加载和播放视频。
   • 它会更新全局的idx变量，根据index从files数组中获取对应的视频文件名。
   • 构建完整的MP4视频路径和PNG海报路径。
   • 将这些路径赋值给vid.src和vid.poster属性，实现视频内容的动态切换。
   • 更新cnt.value显示当前视频序号。
   • 调用vid.play()自动播放视频。
3. 模态框交互:
   • mod.onclick: 当点击模态框时，检查点击目标是否是模态框本身（即背景）。如果是，则调用mod.close()关闭模态框并暂停视频。
   • ui.onclick: 阻止模态框内部表单元素的点击事件冒泡到模态框背景，防止意外关闭。
4. 视频链接事件绑定:
   • links.forEach(): 遍历所有视频链接，为每个链接：
     • 设置其id属性为它在links数组中的索引。
     • 绑定openModal函数作为点击事件处理程序。
5. openModal(e)函数:
   • 当用户点击播放列表中的一个视频链接时触发。
   • e.preventDefault()阻止链接的默认跳转行为。
   • mod.showModal()显示模态框。
   • playList(+this.id)调用playList函数，this.id获取被点击链接的id（即视频索引），+将其转换为数字类型。
6. 播放列表导航 (reverse, forward):
   • prv.onclick = reverse; nxt.onclick = forward;: 为“上一个”和“下一个”按钮绑定相应的事件处理函数。
   • reverse()和forward()函数会递增或递减idx，并处理索引越界的情况（实现循环播放），然后调用playList(idx)加载并播放新视频。

总结与最佳实践

通过上述方法，我们实现了一个高度可扩展的多视频播放模态框解决方案。

主要优点：

• 代码简洁: 避免了大量重复的HTML和JavaScript代码。
• 易于维护: 视频内容的增删改只需修改files数组和播放列表HTML。
• 用户体验: 提供流畅的视频切换和模态框体验，支持播放列表导航。
• 利用原生特性: 充分利用了HTML5 <dialog>元素的原生模态框行为。

注意事项和扩展：

• 错误处理: 在实际应用中，您可能需要添加错误处理机制，例如当视频源加载失败时显示提示信息。
• 性能优化: 对于包含大量视频的播放列表，可以考虑懒加载视频数据，而不是一次性加载所有视频信息。
• 键盘导航: <dialog>元素通常自带一定的键盘可访问性，但您可以进一步增强，例如通过键盘方向键切换视频。
• 自定义数据属性: 除了使用id作为索引，您还可以使用data-*属性来存储更多与视频相关的信息，例如视频标题、描述等，并在JavaScript中读取。
• 视频预加载: 可以根据需求调整视频的预加载策略，例如在模态框打开前预加载下一个视频，以减少切换时的等待时间。
• CSS动画: 可以为模态框的打开和关闭添加CSS过渡或动画，提升视觉效果。

通过遵循这些原则和实践，您可以构建出强大且用户友好的多视频播放体验。