回放列表页面打不开的主因是js重写location.href或路径配置错误；需检查network中资源404、改用绝对路径、配置服务端fallback；事件绑定须用委托；ios视频须加playsinline和手势触发播放。
回放列表页面打不开，检查 location.href 是否被重写
很多静态 HTML 回放页用 JS 动态加载列表，但一刷新就空白或跳转——大概率是脚本里写了 window.location.href = '...' 或 history.pushState 干扰了初始路径。尤其当页面部署在子路径（比如 /live/archives/）时，相对 URL 会错位。
实操建议：
- 打开浏览器开发者工具 → Network 标签页，刷新页面，看
archives.json或streams.js这类资源是否 404；如果是，说明路径拼错了 - 检查 JS 中所有
fetch()或XMLHttpRequest的请求地址，确保是绝对路径（如/api/streams）或基于document.baseURI构造 - 避免在
<script></script>标签里直接写location.href = 'index.html'—— 它会强制跳转，中断 DOM 渲染
点击链接跳转 404，确认服务器是否支持静态文件路由 fallback
HTML 回放页常带哈希或路径参数，例如 archive.html#20240520 或 /archive/20240520/。前者靠前端 JS 解析没问题；后者若服务端没配 fallback，就会返回 404 —— 因为真实不存在 /archive/20240520/index.html 这个文件。
实操建议：
- 本地用
python3 -m http.server启的服务不支持 fallback，仅适合测试纯静态结构；上线必须换 Nginx / Apache / Vercel 等 - Nginx 示例配置中必须包含：
try_files $uri $uri/ /archive.html;（把所有未命中路径都 fallback 到主页面） - 如果用 GitHub Pages，只能用哈希路由（
#），不能用路径路由（/archive/xxx），否则子路径访问必 404
列表渲染后点击无反应，排查 addEventListener 绑定时机和委托问题
回放列表常由 JS 拼接字符串注入 innerHTML，但后续绑定的点击事件没生效——根本原因是元素插入 DOM 时，事件监听还没挂上，或者用了 querySelectorAll 却没循环绑定。
实操建议：
- 别在
document.write()或innerHTML = '...'后立刻写document.querySelectorAll('a').forEach(...)，要等 DOM 更新完成，可用setTimeout(fn, 0)或更稳妥的requestAnimationFrame - 优先用事件委托：
document.getElementById('list').addEventListener('click', e => { if (e.target.matches('a[data-id]')) { /* 处理 */ } }) - 避免给每个链接单独绑
onclick属性，既难维护又容易内存泄漏
移动端点不动、iOS Safari 播放失败，注意 video 标签的 preload 和 playsinline
回放页嵌了 <video></video> 标签，但在 iPhone 上一点就黑屏或弹全屏——不是链接问题，是 Safari 对自动播放和内联播放有硬性限制。
实操建议：
-
<video></video>必须加playsinline属性，否则 iOS 强制全屏 -
preload设为"metadata"而非"auto"，减少首屏加载压力，也规避部分安卓机型的预加载阻塞 - 不要依赖
video.play()在页面加载时自动执行；用户手势触发前调用会静音失败，得包在button.addEventListener('click', () => video.play())里
最常被忽略的是：回放链接集合页本身不涉及视频解码，但一旦嵌入 <video></video>，就必须按平台规则来。哪怕只是个封面图链接，若后面藏着自动播放逻辑，iOS 就会悄悄禁掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
