Question

我正在使用带有视频J的hls.js，我想知道如何使用fetch API而不是XMLHttpRequest来实现加载内容的自定义加载程序。

以下是我设法实现的目标：

＆＃13;

hlsConfig: {
    loader: function() {
      this.load = function(url, responseType, onSuccess, onError, timeout, maxRetry, retryDelay) {

        var onProgress = arguments.length <= 8 || arguments[8] === undefined ? null : arguments[8];
        var frag = arguments.length <= 9 || arguments[9] === undefined ? null : arguments[9];

        this.url = url;
        if (frag && !isNaN(frag.byteRangeStartOffset) && !isNaN(frag.byteRangeEndOffset)) {
          this.byteRange = frag.byteRangeStartOffset + '-' + (frag.byteRangeEndOffset - 1);
        }
        this.responseType = responseType;
        this.onSuccess = onSuccess;
        this.onProgress = onProgress;
        this.onError = onError;
        this.stats = {
          trequest: performance.now(),
          retry: 0
        };
        this.timeout = timeout;
        this.maxRetry = maxRetry;
        this.retryDelay = retryDelay;

        if (self.fetch) {
          // use fetch API

        } else {
          // fallback to XMLHttpRequest loader
        }

        return true;
      }
    }

＆＃13;

Answer 1

hls.js只接受xmlHTTPrequest事件。您必须修改hls.js以使其按您喜欢的方式处理输入，搜索“loadinguccess”＃39;在未经明确的hls.js中，将其更改为您自己处理数据的方式。确保有效负载是请求的responseType;确保有效负载是一个ArrayBuffer，如果它要求它，并且只是一个普通的字符串，用于空的responseType。

Answer 2

就个人而言，我已编码以下垫片以传递来自WebRTC或其他任何内容的数据：

function CustomLoaderResponse(response)
{
   this.currentTarget = {};
   this.currentTarget.getResponseHeader = function() { return '' };
   this.currentTarget.response = response;
   this.currentTarget.responseText = typeof(response) == "string" ? response : '';
}
<...>
var response = new CustomLoaderResponse(/* pass string or arraybuffer here */);

我想应该建议在hls.js的未来版本中处理常规JavaScript词典，因为这也不能被视为一种好习惯。

如何为hls.js创建自定义加载程序？

2 个答案: