Javascript html5视频&；音频缓存问题

我已经编写了一个自定义媒体预加载程序，在显示我的

ng2应用程序之前，它使用一系列
XMLHttpRequests
加载大量媒体。干系人要求在使用应用程序之前，所有媒体均以完整版下载

 private loadFile(media: any) {
    return new Promise(function (resolve, reject) {
        var error: boolean = false;

        //for (var media of media.videos) {
        //TODO: Check how this loads.....
        //console.log("Now Loading video >> ", media, media.hasOwnProperty("path"));


        // Standard XHR to load an image
        var request = new XMLHttpRequest();
        request.open("GET", (<any>media).path);
        request.responseType = 'blob';

        // When the request loads, check whether it was successful
        request.onload = () => {
            if (request.status === 200) {
                resolve(request.response);
            }
            else
                // If it fails, reject the promise with a error message
                reject(Error('Media didn\'t load successfully; error code:' + request.statusText));
        };

        // If an error occurs
        request.onerror = () => {
            // Also deal with the case when the entire request fails to begin with
            // This is probably a network error, so reject the promise with an appropriate message
            reject(Error('There was a network error.'));
        };

        request.onreadystatechange = function () {
            if (request.readyState == 4) {
                console.log("Load Complete >> ", media, "from", request.status); // Another callback here
            }
        };

        // Every tick of the progress loader
        request.onprogress = data => console.log(data);

        // Send the request
        request.send();
    })
}

私有加载文件（媒体：任意）{
返回新承诺（功能（解决、拒绝）{
变量错误：布尔值=false；
//用于（媒体的var媒体。视频）{
//TODO:检查此项如何加载。。。。。
//console.log（“正在加载视频>>”，media，media.hasOwnProperty（“路径”）；
//加载图像的标准XHR
var request=new XMLHttpRequest（）；
请求。打开（“获取”(

边缘

我注意到的主要区别是，在呈现内容（预加载后）时，浏览器之间的请求状态不同。但为什么会这样呢

我在2013年的帖子中发现：

视频的缓冲方式取决于浏览器的实现，因此不同的浏览器可能会有所不同

不同的浏览器可以使用不同的因素来决定保留或丢弃部分缓冲区。旧段、磁盘空间、内存和性能是典型的因素

这就是这里发生的事情吗？如果是这样，有人知道如何解决这个问题，以便chrome总是尝试从缓存中提取视频吗？
不确定缓存问题是否是chrome的错误，但你所做的对我来说真的很奇怪

您正在预加载媒体，或者实际上，完全下载媒体，但随后将mediaElement设置为原始源

当我们通过mediaElement（
请求加载媒体时，它不会下载完整的文件，而是只下载它需要的内容而不中断。

这就是为什么你会得到响应。这也可能是为什么chrome不承认它是相同的请求，因此不再使用缓存的原因。我不确定这是否是chrome的错误

但是既然您已经下载了完整的文件，为什么不将mediaElement的
src
设置为这个下载的文件呢

// since you are setting the hr reponseType to `'blob'`
mediaElement.src = URL.createObjectURL(request.response);
// don't forget to URL.revokeObjectURL(mediaElement.src) when loaded

工作示例：（这会在我的FF上触发一个奇怪的bug…）


函数加载视频（url）{
returnnewpromise（（resolve，reject）=>{//这里我们完全下载它
let request=new XMLHttpRequest（）；
request.responseType='blob'；
request.onload=（evt）=>resolve（request.response）；
request.onerror=拒绝；
打开（'GET'，url）；
request.send（）；
}).然后（（blob）=>
新承诺（（解决、拒绝）=>{
解析（URL.createObjectURL（blob））；//直接返回blobURL
})
);
}
加载视频（'https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4')
.然后（blobUrl=>{//现在它已加载
document.body.className='loaded'；
设vid=document.querySelector（'video'）；
vid.src=blobUrl；//我们只是将mediaElement的src设置为这个blobUrl
vid.onload=（）=>URL.revokeObjectURL（blobUrl）；
}).catch（（err）=>console.log（err））；
视频{
显示：无；
}
.已加载的p{
显示：无；
}
.加载的视频{
显示：未设置；
}
正在加载..请稍候

感谢您的回复……不幸的是，在使用应用程序之前，所有媒体都必须完整下载（我会将此添加到问题中）。不过，我现在会尝试并实现您的解决方案-干杯。@Zze，好的，但我想说的是，在这里，您没有使用下载的数据，而是向服务器发出新的请求。因此，chrome中可能存在一个bug，它不使用缓存，但您可以强制它使用您下载的数据，而且这更有意义（按照这个建议，所有UAs的行为都是一样的）。你说的对我来说很有意义-我现在就要尝试并实现它，然后会给你回复。另外，我以前没有听说过UA这个词-你能帮我核实一下吗？UA=>用户代理或者大多数情况下是web浏览器，但是其他类型的软件也实现了一些WebAPI，所以我更喜欢使用通用UA的首字母缩略词，而我不知道有哪个UA实现了媒体API，而不是web浏览器；-PI已经几乎实现了这一点，只是在
清理
方面存在一些问题e新网址。。。。。。。
// since you are setting the hr reponseType to `'blob'`
mediaElement.src = URL.createObjectURL(request.response);
// don't forget to URL.revokeObjectURL(mediaElement.src) when loaded