使用hls.js播放视频,在第一台电脑的谷歌浏览器播放正常,换了一台电脑,还是用的谷歌浏览器,但是视频出不来,在谷歌浏览器的控制台提示Failed to load resource: the server responded with a status of 401 (Unauthorized),但是火狐和360浏览器可以正常看视频。问了AI,回复是:从 Chrome 141 版本开始,浏览器在处理视频/音频流媒体请求(尤其是 HLS 等)时,可能不会自动附加 JavaScript 代码中设置的 Authorization 等自定义请求头。
查了一下两台电脑的谷歌浏览器版本,果然第一台在141之下,第二台在141之上,而我代码里视频鉴权确实是放在自定义header里的!
解决方案就是把鉴权信息,比如X-Sign这些放到url里去,需要注意的是url里参数名称不支持短横线,得用下划线,使用X_Sign这样的参数格式。
之前微信小程序端直接不支持自定义header,所以当时正好让后端做了两种鉴权,一种是从url里读取参数,一种是从header里读取,现在只需要修改web端鉴权为url模式即可。