HTML5 video标签无法直接播放m3u8，因仅Safari原生支持HLS协议；Chrome/Firefox/Edge需hls.js解析分片，且须配置CORS、正确MIME类型及用户手势触发播放。
现代浏览器中直接用 <video> 标签播放 .m3u8 地址基本不可行——Safari 是唯一原生支持的主流浏览器，其余 Chrome、Edge、Firefox 都必须依赖 hls.js 这类 JS 库做解析和分片加载。
为什么不能直接 src="xxx.m3u8"？
HTML5 规范里，<video> 的 src 属性只接受浏览器原生解码器能直接处理的格式（如 MP4、WebM），而 .m3u8 本质是纯文本索引文件，内容是一串 .ts 分片地址。浏览器不解析它，也不下载后续分片。
- Safari（macOS/iOS）例外：通过
canPlayType('application/vnd.apple.mpegurl')检测后可直接赋值video.src - Chrome/Firefox/Edge：调用
Hls.isSupported()返回false，强行赋值只会触发error事件或静默失败 - 即使服务器返回
Content-Type: application/vnd.apple.mpegurl，也改变不了非 Safari 浏览器无法原生加载的事实
hls.js 初始化时的关键配置项
新版 hls.js（v1.3+）默认启用 worker 和低延迟模式，但实际部署中常需手动调整：
-
enableWorker: true（推荐）：把解析逻辑移出主线程，避免卡顿；但需确保hls.min.js同目录下有hls.min.js.map或对应 worker 脚本路径正确 -
lowLatencyMode: true：启用“准实时”模式，减少缓冲区长度；但若服务端EXT-X-TARGETDURATION设置过大（如 >10s），可能引发频繁 rebuffer -
backBufferLength: 90：控制内存中保留多少秒已加载但未播放的分片；直播场景建议设为30~60，点播可更高 -
maxMaxBufferLength: 60：防止因网络抖动导致缓存无限增长，尤其在弱网下必须设限
自动播放被拦截时怎么破？
所有现代浏览器都要求用户手势（click/touch）后才能调用 video.play()，Hls.Events.MANIFEST_PARSED 回调里直接 play() 会抛 NotAllowedError。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：监听
Hls.Events.MEDIA_ATTACHED或loadedmetadata，再绑定一次用户点击事件，点一下再play() - 若必须“无交互启动”，只能靠
video.muted = true+autoplay属性，且仅对静音流有效（直播语音关闭时才可用） - 不要在
Hls.Events.BUFFER_APPENDING里反复play()，这会导致状态混乱和报错
遇到 Hls.Events.ERROR 怎么快速定位？
hls.js 的错误不是全量崩溃，很多是可恢复的（比如单个分片 404、网络超时）。关键看 data.fatal 和 data.fatal === true 才需要重建实例：
-
NetworkError+recovered: false：检查.m3u8URL 是否可 curl 通，HTTP 状态码是否为 200 -
MediaError：大概率是视频编码不兼容（如 H.265 编码的.ts，Chrome 不支持），换 H.264 编码重切 -
otherError+data.response为空：可能是跨域问题，确认服务端返回了Access-Control-Allow-Origin: * - 反复触发
fragLoadingTimeOut：降低fragLoadTimeout配置（默认 20s），或检查 CDN 缓存头是否误设了no-cache
真正容易被忽略的是：m3u8 文件里每个 EXTINF 行后面必须紧跟一个 .ts 路径，且路径必须能被浏览器直接 HTTP GET 到——哪怕只是返回 404，也不能是 403 或跳转。
