在 Chrome Android 中获取 BLOB答案

【问题标题】：Fetching BLOB in Chrome Android在 Chrome Android 中获取 BLOB
【发布时间】：2013-06-15 21:20:15
【问题描述】：

我正在努力在 Android 4.2 上使用 xhr2 和 blob responseType 获取 HTML5 视频。该代码在 Chrome 和 Firefox 桌面以及 Firefox Android 4.2 上完美运行（对于 FF 桌面，我使用 webm 视频而不是 mp4）。

// Taking care of prefix
window.URL = window.URL || window.webkitURL;    

// This function download the video
var loadVideo = function() {

        var xhr = new XMLHttpRequest();

        xhr.addEventListener('load', addVideoFile, false);

        xhr.open('GET', "videos/myvideo.mp4" , true);
        xhr.responseType = 'blob';

        xhr.send();
};

// this function sets the video source
var addVideoFile = function() {
    if(4 == this.readyState && 200 == this.status) {

        var video = document.getElementById('vid'),
            blob = this.response;

        video.src = window.URL.createObjectURL(blob);
        console.log('video ready');
    }
};

loadVideo();

谁能解释一下为什么这不适用于 Android 上的 Chrome？如果我插上手机进行远程调试，控制台会显示'video ready'，提示视频已下载但无法播放，视频只是黑屏。

此外，如果我使用它来获取图像而不是视频，则此代码有效。是否有我不知道的限制，阻止下载超过一定大小的 Blob？（我的视频是 1.5 MB）。

非常感谢您的帮助！

【问题讨论】：

标签： javascript android html google-chrome xmlhttprequest

【解决方案1】：

根据http://caniuse.com/bloburls，对于 Android 4.0-4.3，您需要使用 window.webkitURL.createObjectUrl() 而不是 window.URL.createObjectUrl()。

这将让您生成一个 blob url，尽管我实际上无法获得一个视频元素来播放这样的 url。

【讨论】：

【解决方案2】：

这肯定是一个错误。如果您得到的东西可以在桌面 Chrome 上运行，但在 Android 上不可用，那么 99.5% 的情况下这是我们需要解决的问题。

我已经复制了你的问题http://jsbin.com/uyehun/1，我也提交了错误https://code.google.com/p/chromium/issues/detail?id=253465

【讨论】：

非常感谢您抽出宝贵时间来做这件事！