Javascript 强制获取完整视频,禁止chunk分包

阅读(815)

视频一般体积较大,为了避免浪费带宽,现在的浏览器会优化为先仅获取一小段视频尝试播放,随着播放再继续加载后续内容。抓包体现为先收到一个 HTTP 206 的请求,request header 中带有 Range: bytes=0-,response header 会带有类似 Content-Range bytes 0-3748203 的描述,经过多个这样的包后,最后收到一个 HTTP 200 的请求即意味着获取到完整的视频内容了。这样也达到了“边下边播”的效果。

但有些场景,如视频较小,或希望对视频做完整的文件级 cache,此时需要获取到完整的视频内容,禁止走 chunk 分包的形式。

粗暴的方式是降级使用HTTP 1.0协议,因为 chunk 是HTTP 1.1才引入的特性,但这样得不偿失。

另辟蹊径,使用 XHR 获取视频可以避免被 chunk

var xhr = new XMLHttpRequest();
var videoUrl = 'http://kaifage.com/for-sample.mp4';  // 示例,不存在此视频

xhr.open('GET', videoUrl, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
    if (this.status == 200) {
        // 找到 video 元素,此元素应当本身没有 source
        var elVideo = document.getElementsByTagName('video')[0];

        // 给 video 增加 source 属性
        elVideo.src = (window.webkitURL ? webkitURL : URL).createObjectURL(this.response);

        // 开始播放
        elVideo.play();
    }
}
xhr.send();

实际抓包可测,获取到的视频为完整的一个 HTTP 200 包。

refer:
https://stackoverflow.com/questions/18251632/another-force-chrome-to-fully-buffer-mp4-video