一、混合内容带来播放黑屏的业务现象现在绝大多数业务网站都升级为 HTTPS 安全页面。很多同学会遇到一个很迷惑故障网页本身是 HTTPSM3U8 播放地址打开黑屏但是复制 M3U8 链接新开标签页播放却完全正常。这个问题很多新手不了解它来自浏览器的 Mixed‑Content 混合内容安全策略。简单解释HTTPS 安全页面里面浏览器默认会拦截页面内部发起的 HTTP 非安全资源请求。这里特别容易踩坑M3U8 主索引地址改成了 HTTPS但是 M3U8 内部分片、密钥地址写死 HTTP 绝对链接。从外部看播放地址是 HTTPS但是分片请求依旧是 HTTP被浏览器安全策略拦截直接黑屏。很多人排查的时候只看浏览器地址栏的 M3U8 链接忽略 M3U8 文本内部写死的子资源地址。curl 命令测试全部 200但是浏览器页面内无法播放。遇到混合内容相关的播放故障我会使用 m3u8live.cn查看完整 M3U8 原始文本核对内部分片、密钥使用的协议。二、混合内容常见故障场景场景 1M3U8 主地址改为 HTTPS分片写死 HTTP 绝对 URL对外暴露的播放链接改成 HTTPS但是 M3U8 清单内部 TS 分片是写死的 http 开头绝对地址。页面内加载时分片请求属于混合不安全内容浏览器拦截分片页面黑屏。新开标签直接访问 M3U8 不受页面上下文限制播放正常。场景 2AES‑128 加密流密钥地址使用 HTTP 协议M3U8、TS 分片全部是 HTTPS唯独 #EXT‑X‑KEY 密钥地址是 HTTP。密钥请求被浏览器拦截拿不到密钥解密失败黑屏。场景 3Master 多码率索引子流写死 HTTP 协议默认清晰度子流是 HTTPS其他档位子 M3U8 写死 HTTP。默认码率播放正常切换其他清晰度直接黑屏。场景 4Nginx 代理转发内部生成 M3U8 错误输出 HTTP 协议代理网关对外是 HTTPS后端切片服务生成 M3U8 的时候内部拼接地址错误输出 http造成混合内容。三、容易混淆的误区❌误区只要我给用户的播放链接是 HTTPS所有资源就都是 HTTPS。外部链接只是入口M3U8 文本内部写死的子资源地址才是浏览器真实请求地址。✅正确优先业务后端切片输出相对路径不写死 http/https 域名浏览器会继承页面访问协议自动适配 HTTPS 环境。四、排查实操步骤第一步待测 M3U8 粘贴网页调试工具查看原始 M3U8 文本检查 TS 分片、密钥、子流地址协议头。 第二步看浏览器控制台警告混合内容拦截浏览器会打印明确安全警告。 第三步新开独立浏览器标签访问同一个 M3U8如果新开标签播放正常嵌入 HTTPS 业务页面就黑屏高度怀疑混合内容问题。五、业务开发运维建议HTTPS 业务环境切片服务尽量输出相对路径不要写死 http 绝对 URL自动继承页面协议。如果业务必须使用绝对 URL全部统一输出 https 协议分片、密钥、多码率子流全部统一。Nginx 反向代理场景要识别前端请求协议生成 M3U8 的时候不能硬编码 http。测试不能只新开标签页测试 M3U8务必嵌入真实 HTTPS 业务页面做完整冒烟。六、总结Mixed‑Content 混合内容是 HTTPS 网站播放 M3U8 的隐形坑。外部播放链接为 HTTPS不代表 M3U8 内部的分片、密钥也是 HTTPS。写死 HTTP 绝对地址会被浏览器安全策略拦截表现为嵌入页面黑屏新开标签播放正常。优先后端输出相对路径避免硬编码 http 域名。借助网页调试工具查看 M3U8 原始文本检查所有子资源协议快速定位混合内容故障。
