HTML回放列表链接设置教程

本文深入解析HTML回放列表页面常见故障的根因与实战解决方案：从JS误重写location.href导致刷新空白、路径配置错误引发资源404，到服务端缺少fallback路由造成子路径访问失败；从动态渲染后事件绑定失效的时机陷阱，到iOS Safari对video标签严格的playsinline、手势触发及preload限制——覆盖开发、调试、部署全链路痛点，提供Network排查技巧、绝对路径规范、事件委托最佳实践及跨平台兼容要点，助你一次搞定回放页“打不开、点不动、播不了”的顽疾。

回放列表页面打不开，检查 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 构造
• 避免在