如何為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字典，因為這也不是一種好的做法。