构建可伸缩的视频播放列表与动态模态框教程

<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>

/* 基础样式重置 */
*,
*::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;
}

/* 模态框样式 */
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;
}

/* 视频播放器容器样式 */
.content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100vh; /* 示例宽度，可调整 */
  padding: 0 0.5rem;
  border: 0;
  background: #eee;
}

video {
  width: 100%; /* 视频宽度自适应容器 */
}

/* 导航控制区域样式 */
.control {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0.25rem;
  padding: 0;
  border: 0;
}

// 定义当前播放视频的索引，初始化为0
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; // 计数器

/**
 * @function playList
 * @description 根据索引更新视频播放器内容和计数器
 * @param {number} index - 视频在 `files` 数组中的索引 (0-based)
 */
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; // 绑定点击事件处理函数
});

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

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

/**
 * @function reverse
 * @description 播放列表上一曲
 */
function reverse(e) {
  idx--; // 索引减一
  // 如果索引小于0，则循环到列表末尾
  idx = idx < 0 ? files.length - 1 : idx;
  playList(idx); // 播放对应视频
}

/**
 * @function forward
 * @description 播放列表下一曲
 */
function forward(e) {
  idx++; // 索引加一
  // 如果索引超出列表末尾，则循环到列表开头
  idx = idx > files.length - 1 ? 0 : idx;
  playList(idx); // 播放对应视频
}