1

我正在努力在 Android 4.2 上使用 xhr2 和 blob responseType 和 Chrome 获取 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？如果我插上手机进行远程调试，控制台会显示“视频就绪”，提示视频已下载但无法播放，视频只是黑屏。

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

非常感谢您的帮助！

4

2 回答 2

1

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

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

于 2013-06-24T12:55:33.767 回答
0

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

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

于 2014-04-03T18:38:54.147 回答