HLS.JS 自定义 分片 TS 请求 URL

by Jack Pu

很早之前写过 hls.js 源码解读【1】 ，基本分析了 hls.js 这个库的设计和实现。阅读源码一方面是为了吸收对方设计或者编码上的优点，当然也有可能是另外一个原因，就是一些需求从表面的文档里找不到具体的实现思路。

默认情况下，我们并不需要对解析出来的 ts 分片地址做改造，但是如果真的需要的话，其实有两个思路。

思路 1 复写 Loader 。

自己实现一个关于请求的 Loader ，通过配置传入类似;

class XhrLoader extends Hls.DefaultConfig.loader {

  constructor(config) {
    super(config);
    var load = this.load.bind(this);
    this.load = function(context, config, callbacks) {
      // your code to handle context.url
      load(context,config,callbacks);
    };
  }
}

  var hls = new Hls({
    Loader : XhrLoader,
  });

当然这样无疑增加了一些实现成本，还有一个思路，就是设置 xhrSetup 文档

 const { source } = this.player;
    config.xhrSetup = (xhr, url) => {
      if (/\.mp4/.test(url)) {
        url =  url + '?_q=....'
        xhr.open('GET', url, true);
      }
    };

尤其，需要重视要设置完成后的立即 open ，目的是为了改变 XMLHttpRequest 的 readyState 状态。这段代码可以在源码

https://github.com/dailymotion/hls.js/blob/master/src/utils/xhr-loader.js#L61-L71

看到。

总的来说这些都是比较深入的操作，常规的播放应该都还是非常好上手。