一、MIME?Type 是什么,很多开发不在意 MIME?Type 就是 HTTP 响应头里面的 Content?Type,用来告诉浏览器当前返回的是什么类型文件。很多新手部署 M3U8 资源,Nginx 没有配置正确的 MIME 类型,返回
一、MIME?Type 是什么,很多开发不在意MIME?Type 就是 HTTP 响应头里面的 Content?Type,用来告诉浏览器当前返回的是什么类型文件。很多新手部署 M3U8 资源,Nginx 没有配置正确的 MIME 类型,返回默认text/plain或者application/octet?stream。 现象很迷惑:curl 可以正常下载 M3U8 文本,VLC 播放器播放完全正常,但是放到网页 hls.js 里面,偶尔解析异常,部分浏览器会直接把 M3U8 当成普通文本下载,不会交给播放器解析。 很多人以为只要后缀是.m3u8,浏览器就能自动识别,实际并不是。Nginx 默认 mime.types 里面部分版本对 m3u8 的配置不全,TS 分片的类型也容易配错。还有对象存储 OSS,如果没有设置 Content?Type,同样会出现同类问题。 这个故障不是必现,部分浏览器容错可以勉强播放,但是部分版本浏览器会出问题,属于隐性坑。排查 MIME?Type 相关问题的时候,我会使用 m3u8live.cn,打开 F12 网络面板查看 M3U8 响应头里面 Content?Type 字段,确认返回类型是否规范。 二、M3U8 与 TS 分片标准 MIME 类型
三、高频踩坑场景坑 1:Nginx 没有引入 mime.types,使用默认错误类型Nginx 配置忘记引入types;配置块,m3u8 返回application/octet?stream二进制流类型。浏览器访问 m3u8 链接直接触发文件下载,而不是返回文本。 坑 2:只配置 m3u8 后缀,TS 分片没有配置正确类型只处理.m3u8,忽略.ts分片。TS 分片返回普通二进制类型,大部分情况能播放,但是部分浏览器 MSE 媒体源处理分片会偶现异常。 坑 3:对象存储 OSS 上传 m3u8 文件,自动识别为 text/plain上传 m3u8 文本文件到阿里云、腾讯云对象存储,系统自动识别为普通文本,Content?Type 为 text/plain。需要手动修改文件元信息。 坑 4:代理转发之后,原始 Content?Type 被覆盖经过 Nginx 反向代理,上游源站返回正确 MIME 类型,代理层改写、丢弃 Content?Type,浏览器拿到错误类型。 四、Nginx 简单正确配置示例
配置完成之后,curl 查看响应头:
观察Content?Type是否输出application/vnd.apple.mpegurl。 五、排查简单步骤第一步,待测 M3U8 地址粘贴网页调试工具,F12 网络面板,查看 M3U8 请求响应头 Content?Type。
第二步,TS 分片同样查看 Content?Type,确认是video/MP2T。 第三步,对象存储场景,修改文件元数据,手动设置正确 Content?Type。 六、总结M3U8 资源的 MIME?Type(Content?Type)很容易被新手忽略。虽然 VLC、curl 不受影响,但是浏览器环境,错误的类型会导致 M3U8 被当做普通文件下载,偶现解析异常。Nginx、对象存储 OSS 都需要配置标准 MIME 类型。借助网页调试工具查看网络响应头 Content?Type,快速确认配置是否生效,规避这类隐性问题。 |
2023-01-09
2022-08-10
2022-08-26
2024-03-27
2022-08-26