html 中 id 必须唯一，重复使用 `id="mybtn"` 或 `id="mymodal"` 会导致 javascript 只能获取第一个元素，造成仅首个按钮生效。本文提供基于类名（class）与事件委托的通用解决方案，支持任意数量的视频弹窗，代码简洁、可维护性强。
在构建多视频弹窗交互时，一个常见却极易被忽视的错误是：重复使用相同的 id 属性。你的原始代码中，四个 <button> 全部设置了 id="myBtn"，四个模态框全部使用 id="myModal"，而 <video> 标签也全部为 id="myVideo"。根据 HTML 规范，id 必须在整个文档中唯一；当 JavaScript 调用 document.getElementById() 时，它只会返回第一个匹配的元素——这正是“只有第一个触发器工作”的根本原因。
✅ 正确解法是：弃用重复 ID，改用语义化 class，并通过事件委托统一管理逻辑。这种方式不仅修复问题，还显著提升代码可扩展性（新增第 5、第 10 个视频只需添加 HTML，无需修改 JS）。
✅ 推荐实现方案（精简、健壮、无 ID 依赖）
1. HTML 结构（关键：使用 class 替代 id）
<button class="myBtn">01_prescricao_enf_med</button>
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<video width="100%" controls>
<source src="https://xxx.net.br/sin_saude/01_prescricao_enf_med.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
</div>
</div>
<button class="myBtn">02_prescricao_enf_med</button>
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<video width="100%" controls>
<source src="https://xxx.net.br/sin_saude/02_prescricao_enf_med.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
</div>
</div>
<!-- 后续按钮与 modal 同理，结构一致 -->2. CSS 样式（控制显隐与基础布局）
.modal {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.8);
z-index: 1000;
}
.modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
max-width: 90%;
max-height: 80vh;
overflow: hidden;
}
.close {
float: right;
font-size: 28px;
cursor: pointer;
}3. JavaScript（单次绑定，智能定位）
document.body.addEventListener('click', (e) => {
const target = e.target;
// 点击触发按钮 → 显示对应 modal 并播放视频
if (target.classList.contains('myBtn')) {
const modal = target.nextElementSibling;
if (modal && modal.classList.contains('modal')) {
modal.classList.add('active');
const video = modal.querySelector('video');
if (video) video.play().catch(e => console.warn("Autoplay prevented:", e));
}
}
// 点击模态框背景或关闭按钮 → 隐藏并暂停
else if (target.classList.contains('close') || target === target.closest('.modal')) {
const modal = target.classList.contains('close')
? target.closest('.modal')
: target;
modal.classList.remove('active');
const video = modal.querySelector('video');
if (video) video.pause();
}
});⚠️ 注意事项与最佳实践
- 避免内联样式与重复 ID：始终确保 id 唯一；若需批量操作，优先选择 class + querySelectorAll() 或事件委托。
- 处理自动播放限制：现代浏览器禁止静音外的自动播放。如遇 play() failed because the user didn't interact with the document first，请确保点击触发后调用 play()（本方案已满足）。
- 增强健壮性（可选）：可为每个 <video> 添加 preload="metadata" 提升加载响应速度；为 .close 按钮单独绑定事件可进一步解耦逻辑。
- 无障碍优化：建议为 myBtn 添加 role="button" 和 aria-expanded 属性，提升屏幕阅读器兼容性。
该方案彻底规避了 DOM 元素 ID 冲突问题，以声明式结构和事件委托为核心，兼顾可读性、可维护性与浏览器兼容性——无论你有 4 个还是 40 个视频弹窗，只需遵循相同 HTML 模式，一行 JS 即可全局驱动。
