手机旋转会让 HLS 播放重新开始吗？排查尺寸变化、全屏与播放器重建
区分手机方向变化引起的正常布局调整与真正的 HLS 重载；只有播放器确实需要重建时，才安全恢复播放状态。
手机横过来时，如果 HLS 视频暂停、跳播或重新加载，单凭旋转动作还不能判断原因。响应式布局可能只是改变了尺寸；应用可能替换了 <video> 元素；进入全屏也可能触发另一种状态变化；页面也可能确实重新加载了媒体源。
先确认究竟发生了什么。比较竖屏与横屏时，尽量保持授权测试流、播放器版本、浏览器、播放位置和网络不变。不要因为转动一次手机就认定是浏览器缺陷，也不要在直播中不加判断地恢复旧时间戳。
验证方法 — 2026 年 9 月 28 日： 我们核对了 MDN 关于 Screen Orientation API、视口方向媒体查询、HTMLMediaElement.currentTime、play() 和全屏的文档，并运行了确定性的 Node.js 测试夹具，覆盖合成的尺寸变化、组件重建和状态恢复场景。这仅代表文档核对与夹具逻辑测试：未测试实体手机、特定移动端 HLS 引擎或真实流。夹具：scripts/test-hls-orientation-fixture.cjs。
区分布局变化与播放器重启
不同信号通常指向不同层面：
| 观察到的现象 | 可能含义 | 接下来检查什么 |
|---|---|---|
| 播放器尺寸改变，但媒体时间继续前进 | 响应式布局或视频尺寸调整 | CSS/布局及 resize 处理逻辑 |
screen.orientation 触发 change 事件 | 浏览器报告了方向变化 | 检查事件处理器是否同时改动播放器状态 |
| 视频节点或播放器实例 ID 改变 | 框架或应用重新挂载了播放器 | 组件 key、条件渲染、路由状态 |
| 重新请求了清单，媒体时间也接近归零 | 媒体源重载或播放器重新初始化 | src 赋值、播放器 load() 调用、effect 依赖 |
| 播放暂停，但没有新的清单请求 | 暂停策略、可见性处理、浏览器行为或用户操作 | 记录 paused、页面可见性、全屏及媒体事件 |
CSS 的 orientation 媒体特性描述的是视口形状，并不能证明某个实体设备传感器事件导致了播放重启。JavaScript 确实需要方向通知时，在支持的环境中优先使用 Screen Orientation API 的 change 事件，而不是已弃用的 orientationchange。通常只需调整容器尺寸，不必重建视频元素。
改代码之前先为播放器加上诊断记录
进行简短且经过授权的测试时，记录带时间戳的事件序列：
screen.orientation.type以及视口宽高（如环境支持）。- 稳定的应用播放器实例 ID，以及实际
<video>节点是否换过。 currentSrc或已脱敏的来源标识、currentTime、paused、readyState和networkState。resize、visibilitychange、fullscreenchange、pause、playing、waiting、emptied、loadstart与loadedmetadata事件。- 是否重新请求了清单或媒体。只记录脱敏后的主机/路径类别；不要保存签名查询参数、Cookie 或授权请求头。
旋转前记录一次，等布局稳定后再记录一次。如果视频节点和媒体源都没变，也没有新的加载流程，就先调查布局或缓冲，不要急着归因于播放器重启。如果节点变了，找出替换它的渲染分支；如果媒体源被重新赋值，就沿着对应代码路径追踪。
分开测试旋转、全屏与页面重载
用小型测试矩阵逐项排查，不要反复旋转后凭感觉判断：
| 测试 | 只改变什么 | 比较哪些证据 |
|---|---|---|
| 播放时从竖屏转为横屏 | 视口/设备方向 | 节点身份、媒体时间、新请求、暂停状态 |
| 暂停时从横屏转为竖屏 | 保持暂停意图，只改变方向 | 播放器是否意外开始播放或跳转 |
| 不旋转设备，只进出全屏 | 全屏状态 | 全屏 Promise/事件与媒体源连续性 |
| 调整桌面浏览器窗口大小 | 布局尺寸 | 应用逻辑与移动端是否出现不同反应 |
| 明确重新加载页面 | 文档生命周期 | 新播放器实例及新的媒体源请求是否符合预期 |
不要把模拟器或桌面浏览器的视口模拟描述成实体设备测试。如果你无法接触发生问题的手机/浏览器组合，应注明仅核对文档或尚未测试，并向报告者索取浏览器版本、操作系统版本、设备类别及脱敏事件记录。
尽量保持媒体元素稳定
让 CSS 调整播放器外壳的尺寸，同时保留同一个媒体元素和 HLS 实例。避免把方向相关的值用作框架 key，或放在会导致播放器组件卸载的条件分支中。除非引擎有明确记录的限制，否则也不要在每次 resize 时重建播放器。
确实无法避免拆除播放器时，只保存可以安全恢复的状态：媒体源身份、原先是否暂停、支持时的音轨/画质偏好，以及最近观察到的媒体时间。重新挂载媒体源后，先等待元数据与可 seek 范围，再验证目标时间是否仍然有效。currentTime 是 seek 位置，不是直播内容的永久身份；播放器重建期间，直播 DVR 窗口可能已经移动或过期。根据产品预期，将目标限制在当前可用范围内，或回到直播边缘。
只有前一状态及产品行为确实支持继续播放时，才调用 play()。它返回的 Promise 可能被拒绝，因此应处理失败，并保留可用的播放按钮。进入全屏同样是异步操作，也可能被拒绝；应根据实际的全屏事件更新界面，不要假设请求一定成功。
常见误区
- 每次
resize都重建播放器： 旋转和浏览器工具栏变化会导致布局事件，但不代表媒体源需要重载。 - 使用会变化的组件 key： 与宽度/方向绑定的 key 可能会主动替换整个视频子树。
- 只监听旧方向事件： 支持时使用现代 Screen Orientation API；不需要方向信息时也应提供合理的降级处理。
- 无条件 seek 到直播的旧时间： 当前直播窗口可能已经不再包含该位置。
- 调用
play()却不处理 Promise： 用户手势要求或浏览器策略可能阻止自动续播。 - 假设是全屏导致旋转： 单独测试进入/退出全屏与方向变化。
- 直接分享完整请求日志： URL 查询参数和请求头可能包含凭据，分享前要脱敏。
简洁的故障报告
报告设备与操作系统、浏览器/版本、播放器/引擎版本、流类型（VOD 或直播/DVR）、开始时的播放状态及精确测试步骤。说明视频节点或播放器实例是否更换、清单请求是否重新开始，以及 currentTime、paused 或可 seek 范围是否改变。对流 URL、密钥、令牌、Cookie 和私有主机名进行脱敏。如果只是依据文档推断、没有在指定设备复现，也要明确说明。
还可以参考移动端 HLS 播放指南、应用切到后台或锁屏后的 HLS 播放排查，以及自动播放被阻止时的诊断方法。
一手参考资料
- MDN：ScreenOrientation 的
change事件 - MDN：管理屏幕方向
- MDN：
HTMLMediaElement.currentTime - MDN：
HTMLMediaElement.play() - MDN：
Element.requestFullscreen() - MDN：已弃用的
orientationchange事件
关键不是“竖屏还是横屏”，而是“只有布局改变，还是播放器/媒体源的生命周期也变了”。先确认这条边界，再判断是否需要恢复播放状态。