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

Question

我在视频Js中使用hls.js，我想知道如何实现一个自定义加载程序，该加载程序使用访存API而不是XMLHttpRequest加载内容。

以下是我设法达到的目标：

 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; } } 

Answer 1

hls.js仅接受xmlHTTPrequest事件。 您必须修改hls.js，使其以您喜欢的方式处理输入，在未缩小的hls.js中搜索“ loadsuccess”，然后将其更改为您自己处理数据的方式。 确保有效负载为请求的responseType； 确保有效负载（如果需要）是ArrayBuffer，并且只是空响应类型的纯字符串。

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字典，因为这也不是一种好的做法。