构建可扩展的多视频模态播放器解决方案

<ol class="playlist">
  <a href="#"><b>40</b> Seconds</a>
  <a href="#"><b>11</b> Seconds</a>
  <a href="#"><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>

// 定义全局变量和DOM元素引用
let idx = 0; // 当前播放视频的索引
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"; // 构建海报图完整路径

  vid.src = mp4; // 设置视频源
  vid.poster = png; // 设置视频海报图
  cnt.value = `${idx + 1}/${files.length}`; // 更新计数器显示（例如 1/3）
  vid.load(); // 重新加载视频以应用新的源
  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 函数
});

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

// 绑定上一页/下一页按钮的点击事件
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); // 加载并播放新视频
}

// 模态框关闭时暂停视频
mod.addEventListener('close', () => {
    vid.pause();
    vid.currentTime = 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;
  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 模态框样式 */
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; }
.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%; }

/* 按钮通用样式 */
.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); }

/* 隐藏滚动条 */
.scroll::-webkit-scrollbar { display: none; }
.scroll { -ms-overflow-style: none; scrollbar-width: none; }