hls.min.js 页面禁用 referer 问题 时间: 2020-09-07 17:09 分类: JAVA 有些朋友做网站的时候可能使用了各种第三方图床，某些图床检测了`referer`来路，网上最长见的解决办法就是页面添加如下标签： ``` <meta name="referrer" content="never"> ``` 上面标签的作用就是当前页面所有请求都不会添加`referer`协议头。 但在使用`hls.min.js`的视频网站上如果添加如上的标签，那么将可能出现某些浏览器无法正常播放。 昨晚为了解决这个问题差点又通宵了，结果今天又花了将近大半下午才发现仅仅是页面添加如上标签导致的。 经过多次分析，添加如上标签后，在`Edge`浏览器上，`m3u8`地址会被加载两次，一次是`xhr`请求，还有一次是`media`，而实际上如果我们使用了`hls.min.js`的话，理应只会有一个`xhr`请求。 添加如下代码，打开`hls`的日志： ``` var config = { debug: true } const hls = new Hls(config); ``` 发现每次只会加载`m3u8`文件，解析完后，`ts`分片文件并不会进行加载。 该问题暂时只发现出现在`Edge`浏览器上，如果你的`m3u8`或者`ts`文件都是做过加密处理不是标准的格式，那么就会出现上述问题。 上述问题很简单，就是`Edge`浏览器不知为何`hls`只解析了`m3u8`链接，`ts`不会进行加载，好像是被另外一个`media`请求打断了。 这个`media`就相当于`video`标签上的`src`加载，如果`m3u8`加密了它就会解析失败，所以导致播放失败。 经测试如果是标准`m3u8`链接，并不会播放失败，但还是一样会被浏览器的`media`接管，并不会使用`hls。min.js`进行播放。 实际上和手机浏览器差不多，目前大多数浏览器都接管了视频播放器，调用其自身去解析`m3u8`与`ts`链接，并不走`MSE`那一套，这也就是为什么大多数视频网站不做手机端网页高清播放模式，因为无法做加密处理，只能走标准的格式。 标签: 无