需使用hls.js等JS播放器在Chrome/Firefox等非Safari浏览器中播放m3u8，确认MSE启用、服务端配置正确MIME与CORS、视频编码为H.264+AAC，并针对微信WebView添加playsinline/muted等兼容属性。
如果您尝试在浏览器中播放 .m3u8 格式的 HLS 视频，但页面显示空白、报错或无响应，则可能是由于浏览器原生支持缺失、MIME 类型配置错误、解码器不兼容或播放器初始化失败所致。以下是解决此问题的步骤：
一、确认浏览器原生支持能力与版本要求
HLS（HTTP Live Streaming）在不同浏览器中的支持方式存在显著差异：Safari 自 macOS 10.12 / iOS 10 起原生支持；Chrome、Firefox、Edge 等主流 Chromium/Gecko 内核浏览器**不原生支持 HLS**，必须依赖 JavaScript 播放器（如 hls.js）通过 Media Source Extensions（MSE）实现播放。
1、打开浏览器地址栏，输入 chrome://version 或 about:support，确认版本号不低于 Chrome 90、Firefox 85、Edge 90。
2、访问 https://caniuse.com/mse 与 https://caniuse.com/hls，验证当前浏览器是否启用 MSE 且未被企业策略禁用。
3、在开发者工具（F12）的“控制台”中执行 !!window.MediaSource，返回 true 表示 MSE 可用；若为 false，则无法使用 hls.js 等 MSE 方案。
二、使用 hls.js 实现跨浏览器兼容播放
hls.js 是一个纯 JavaScript 实现的 HLS 客户端，可将 HLS 流转换为 MSE 兼容的媒体源，从而在不原生支持 HLS 的浏览器中播放 m3u8 视频。
1、在 HTML 页面中引入 hls.js 最新稳定版 CDN：<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>。
2、确保页面中存在具有 id="video" 的
3、编写初始化脚本：检测 Hls.isSupported() 返回 true 后，创建 Hls 实例并调用 loadSource() 加载 m3u8 URL，再调用 attachMedia() 绑定 video 元素。
4、对 Safari 等原生支持 HLS 的浏览器，添加降级逻辑：若 !Hls.isSupported()，直接将 m3u8 地址赋值给 video.src，并设置 type="application/vnd.apple.mpegurl"。
三、修正服务端 MIME 类型与 CORS 配置
浏览器拒绝加载 m3u8 文件的常见原因是服务器未正确声明 Content-Type 响应头，或跨域资源共享（CORS）策略阻止了分片资源读取，导致播放器无法解析清单或获取 ts/mp4 片段。
1、使用 curl 或浏览器开发者工具“网络”标签页，检查 m3u8 请求响应头中是否包含 Content-Type: application/vnd.apple.mpegurl；若为 text/plain 或未设置，需在 Web 服务器（如 Nginx、Apache）中显式配置该类型映射。
2、确认所有相关资源（m3u8 主清单、子清单、.ts/.mp4 分片、密钥文件）均返回 Access-Control-Allow-Origin: * 或精确匹配前端域名的响应头。
3、若使用 CDN 或对象存储（如阿里云 OSS、AWS S3），进入控制台检查存储桶的跨域配置（CORS Rules），确保允许 GET 方法及必要标头（如 Authorization、Content-Type）。
四、排查视频编码与容器格式兼容性
即使 m3u8 清单可加载，部分 HLS 流仍无法播放，根源常在于编码格式超出浏览器解码能力范围：Chrome 与 Edge 支持 H.264 + AAC，但**不支持 H.265（HEVC）或 AV1 编码的 HLS 流**；iOS Safari 虽支持 H.265，但仅限硬件加速场景，且要求 profile 兼容（如 Main Profile）。
1、使用 VLC 打开 m3u8 链接，在“工具 → 媒体信息 → 编解码器”中查看视频流编码为 H264 还是 HEVC，音频流是否为 MP4A（AAC）。
2、若确认为 HEVC，需在转码环节强制指定 -vcodec libx264 与 -profile:v main 参数，生成全平台兼容的 H.264 流。
3、避免使用不被广泛支持的封装格式（如 fMP4 片段未正确标注 moof/mdat），优先采用传统 TS 分片（.ts）并确保 m3u8 中 #EXT-X-VERSION:3 或更高。
五、处理微信内置浏览器等特殊 WebView 场景
iOS 微信内置浏览器（X5 内核）和部分安卓 WebView 对 HLS 支持极不稳定，常因 autoplay 策略、静音限制或内核精简导致播放失败，即使 hls.js 初始化成功也无法触发解码。
1、为
2、监听 WeixinJSBridgeReady 事件，在微信环境就绪后立即调用 video.play()，而非依赖页面 onload。
3、若仍失败，改用 flv.js + HTTP-FLV 方案作为备用路径：服务端同步输出 FLV 流，前端根据 UA 判断是否为微信环境，自动切换播放器实例。
