html5play函数不支持m3u8的根本原因是浏览器原生video标签大多不支持HLS协议，仅Safari默认支持；其本质是封装原生video元素，无内置解协议能力，直接赋值m3u8会失败。
html5play 函数不支持 m3u8 的根本原因
浏览器原生 标签在大多数情况下（尤其是 Chrome、Firefox、Edge）**不支持直接播放 m3u8**，因为 m3u8 是 HLS 协议的播放列表格式，而 HLS 不是 HTML5 视频规范强制要求实现的协议。Safari 是唯一默认支持 HLS 的主流桌面浏览器，且仅限 macOS/iOS 环境。html5play 函数本质是封装或操作原生 元素，它本身没有内置解协议能力，所以传入 m3u8 链接后，video.src = 'xxx.m3u8' 会直接失败，控制台通常报错：DOMException: The element has no supported sources 或直接静音黑屏。
用 hls.js 实现 m3u8 播放的实操步骤
当前最通用、稳定、兼容性最好的方案是引入 hls.js 库，在支持 Media Source Extensions（MSE）的浏览器中将 m3u8 解析为 fragmented MP4 流喂给 。注意：hls.js 不适用于 Safari（它自带 HLS 支持，反而会冲突）。
- 先检测是否为 Safari：
!/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)或更稳妥地用Hls.isSupported() - 若支持 hls.js，创建实例并绑定到
：if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource('https://example.com/index.m3u8'); hls.attachMedia(videoEl); hls.on(Hls.Events.MANIFEST_PARSED, () => videoEl.play()); } - 若为 Safari，跳过 hls.js，直接赋值：
videoEl.src = 'https://example.com/index.m3u8'; videoEl.addEventListener('loadedmetadata', () => videoEl.play()); - 务必确保服务端对 m3u8 及其 ts 分片返回正确的 MIME 类型：
application/vnd.apple.mpegurl（m3u8）、video/MP2T（ts）
html5play 函数里集成 hls.js 的关键修改点
如果你封装的 html5play 是一个可复用的播放函数，不能只做 video.src = url，需按协议类型分流处理：
- 判断 URL 是否含
.m3u8或以http开头且响应头含application/vnd.apple.mpegurl（后者需预检，一般简化为后缀判断） - 若为 m3u8，且非 Safari，则优先走 hls.js 流程；否则 fallback 到原生
src赋值（留给 Safari） - 记得清理旧实例：每次调用前执行
hls.destroy()，避免重复加载或内存泄漏 - 错误监听不可少：
hls.on(Hls.Events.ERROR, (e, data) => { if (data.fatal) hls.destroy(); })
容易被忽略的坑：跨域、CORS 与服务端配置
m3u8 播放失败，一半以上不是代码问题，而是服务端限制：
立即学习“前端免费学习笔记（深入）”；
- m3u8 文件本身和所有
.ts分片必须开启 CORS，响应头需含：Access-Control-Allow-Origin: *（或具体域名），否则 hls.js 加载时被浏览器拦截，控制台显示Failed to fetch - 部分 Nginx 配置会默认屏蔽
.m3u8类型，需显式添加：types { application/vnd.apple.mpegurl m3u8; } - HTTPS 页面无法加载 HTTP 的 m3u8（混合内容），全站必须统一协议
- 移动端某些安卓 WebView（如早期 UC、QQ）不支持 MSE，hls.js 会静默失效，此时只能降级为下载或提示“暂不支持”
别急着改前端逻辑——先用 curl 或浏览器 Network 面板确认 m3u8 和 ts 请求是否能 200 返回、是否有 CORS 报错，这比调试 JS 快得多。
