视频资源缓存

2019-12-12 442 阅读1分钟

背景

页面需要将视频作为背景，循环播放，直接使用视频loop模式从控制台network中可以看到每次都会重新请求视频资源，所以需要把视频缓存下来。具体方案如下

var videoEle = document.getElementById('video');
var req = new XMLHttpRequest();
req.open("GET", "video.mp4", true);
req.responseType = "blob";
req.onload = function () {
    if (this.status === 200) {
        var videoBlob = this.response;
        blobSrc = URL.createObjectURL(videoBlob); // IE10+
        videoEle.src = blobSrc;
        videoEle.play();
    }
};
req.onerror = function () { };
req.send();