iPad Safari 播放 HTML5 直播不稳的根本原因是 Safari 媒体策略与 iOS 硬件解码限制叠加，需从 HLS 协议、内联播放、用户手势触发、preload 策略及低电量模式五方面协同优化。
HTML5 在 iPad 上播直播流不稳，根本原因不是“不支持”，而是 Safari 的媒体策略 + iOS 硬件解码限制双重卡点。单纯换 video 标签属性或加 autoplay 几乎无效——得从流协议、加载时机、解码路径三处动手。
用 HLS 而非 MP4 或 FLV 直推
iPad Safari 原生只稳定支持 HLS（.m3u8），且必须是 AAC 音频 + H.264 视频编码。直接塞 rtmp:// 或 ws:// 流地址会静默失败；用 MP4 模拟直播（如不断替换 src）则触发 Safari 的缓存重载机制，造成跳帧、黑屏、自动暂停。
- ✅ 正确做法：后端转封装为标准 HLS，切片时长 ≤ 4s，主播放列表含
#EXT-X-VERSION:6及#EXT-X-INDEPENDENT-SEGMENTS - ❌ 错误示例：
<video src="live.mp4"></video>
—— Safari 不识别“伪直播”MP4 - ⚠️ 注意：iOS 17+ 对
hls.js兼容性差，别强行用 JS 解复用；优先走原生<video>+src指向.m3u8
playsinline 和 webkit-playsinline 必须同时写
iPad Safari 默认全屏播放视频，一旦进入全屏，系统会中断后台音频/网络连接，导致 HLS 切片加载超时、缓冲区清空、重连断层。强制内联播放才能维持持续拉流。
- ✅ 必须同时设置两个属性：
<video controls playsinline webkit-playsinline src="live.m3u8"></video>
- ❌ 单写
playsinline：iOS 15–16 下失效；单写webkit-playsinline：iOS 17+ 警告弃用但暂仍生效 - ⚠️ 补充：还需在
<head>中加<meta name="apple-mobile-web-app-capable" content="yes">
，否则某些 iPadOS 版本会忽略内联策略
避免 load() 和 play() 手动调用时机错乱
iPad 对用户手势触发的媒体播放有严格限制：没经过真实点击/触摸事件，play() 会静默拒绝（返回 Promise rejected），且后续再调也无法恢复。很多“先 load 再 play”的逻辑在 iPad 上直接卡死。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确链路：所有播放操作绑定在用户可交互元素上，例如
document.getElementById('start-btn').addEventListener('click', () => { video.play().catch(e => console.warn('play blocked:', e)); }); - ❌ 错误模式：
video.load(); setTimeout(() => video.play(), 100);
—— 无用户手势上下文，必失败 - ⚠️ 注意：Safari 的
play()Promise 拒绝错误信息通常是"NotAllowedError: The request is not allowed by the user agent or the platform in the current context."，不是网络或编解码问题
关掉 preload="auto"，改用 preload="metadata"
preload="auto" 会让 Safari 尝试预加载整个 HLS 播放列表甚至前几个切片，但在弱网或高延迟 DNS 下极易超时阻塞，导致 canplay 事件永不触发。而 metadata 仅请求 M3U8 文件头，轻量可靠。
- ✅ 推荐配置：
<video preload="metadata" playsinline webkit-playsinline src="live.m3u8"></video>
- ❌ 不要依赖 JS 动态设
preload：Safari 只读取初始 HTML 属性值 - ⚠️ 补充：若需监听准备就绪，监听
loadedmetadata比canplay更早、更稳
最常被忽略的一点：iPad 的「低电量模式」会强制降频 CPU 并限制后台网络，哪怕直播页面在前台，HLS 切片下载也可能被系统限速——务必提醒用户关闭该模式。这不是代码能绕过的，是 iOS 底层策略。
