HTML5 video.play()无法直接播放HLS流，因HLS非强制标准，仅Safari原生支持；需用hls.js通过MSE解析为MP4流，并在用户手势中调用play()，注意CORS、MIME及iOS限制。
HTML5 play() 不能直接播 HLS 流
HTML5 原生 的 play() 方法不支持直接播放 .m3u8 地址，因为 HLS（HTTP Live Streaming）不是 HTML5 规范强制要求的原生支持格式。Chrome、Firefox 和 Edge（非 Chromium 内核旧版）默认不解析 HLS；只有 Safari 在 macOS/iOS 上原生支持。调用 play() 后静音、卡住、或报 DOMException: The element has no supported sources 都是典型表现。
必须用第三方库如 hls.js 实现跨浏览器 HLS 播放
主流方案是使用 hls.js（由 Video.js 团队维护），它通过 MSE（Media Source Extensions）将 HLS 解析为浏览器可识别的 fragmented MP4 流。关键步骤如下：
- 确保页面已加载
hls.js（CDN 或 npm 引入）： - 创建
元素，**不要**直接设src属性 - 初始化
Hls实例并绑定到 video：const video = document.getElementById('video');
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource('https://example.com/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
} - 对于 Safari，可 fallback 到原生播放（
src直接赋值），但需手动处理自动播放策略（如用户手势触发）
play() 调用时机和自动播放限制很关键
即使 HLS 加载完成，video.play() 也可能被浏览器阻止——现代浏览器普遍要求播放操作由用户手势（如 click、touchstart）触发，否则抛出 NotAllowedError。常见错误写法：hls.on('manifestParsed', () => video.play()) 在无用户交互时必然失败。
- 必须在用户真实交互回调中调用
play()，例如：button.addEventListener('click', () => {
if (video.paused) video.play();
}); - 若需“静音自动播放”，可在
play()前设置video.muted = true且video.volume = 0，部分浏览器允许此场景免手势 - 注意
hls.js的MANIFEST_PARSED事件只表示清单已读取，并不代表首片数据就绪；更稳妥的是监听Hls.Events.BUFFER_UPDATED或检查video.readyState >= 3
移动端 iOS Safari 的特殊处理
iOS Safari 虽原生支持 HLS，但有额外限制：不支持带 CORS 的跨域 .m3u8（即使服务端配了 Access-Control-Allow-Origin: *），也不支持通过 JS 动态设置 src 后立即 play()。此时仍建议统一走 hls.js，避免双路径维护成本。
立即学习“前端免费学习笔记（深入）”；
- 务必确认 m3u8 及其 ts 分片响应头含
Content-Type: application/vnd.apple.mpegurl（.m3u8）和video/MP2T（.ts） - 若用自建服务器，Nginx 需显式配置 MIME 类型，否则 iOS 可能拒绝加载
- 避免在
autoplay属性上依赖：iOS 忽略autoplay，且静音也不保证生效
真正麻烦的不是怎么播，而是什么时候播、在哪种上下文里播——用户手势、MSE 兼容性、CORS、MIME、静音策略，每个环节断掉都会让 play() 无声无息地失败。
