Question

我想使用xhr下载视频文件，然后使用window.createObjectURL设置源。

此代码适用于Chrome＆amp; Firefox桌面，也适用于Firefox Android，但不适用于Chrome Android：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video Test</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<button id="load">Load Video from XHR</button>
<br/><br/>

<video id="vid" controls style="max-width:600px;">
</video>

  <script>

    var video = document.getElementById('vid');

    // Taking care of prefix
    window.URL = window.URL || window.webkitURL;

    // This function download the video
    var loadVideo = function() {

        console.log('loading start!!!')

        var xhr = new XMLHttpRequest();

        xhr.addEventListener('load', addVideoFile, false);

        xhr.open('GET', "http://www.my-website/video.mp4" , true);
        xhr.responseType = 'arraybuffer';

        xhr.send();
    };

    // this function sets the video source
    var addVideoFile = function() {
        if(4 == this.readyState && 200 == this.status) {

            console.log('loading complete');
            video.src = window.URL.createObjectURL(new Blob([this.response], {type: "video/mp4"}));
        }
    };

    document.getElementById('load').addEventListener('click', loadVideo, false);

  </script>
</body>
</html>

在Chrome Android上，视频会加载，但加载后无法播放，控制台上不会显示错误。如果我更改这两行：

xhr.responseType = 'arraybuffer';
//...
video.src = window.URL.createObjectURL(new Blob([this.response], {type: "video/mp4"}));

到

xhr.responseType = 'blob';
//...
video.src = window.URL.createObjectURL(this.response);

然后适用于Chrome Android（以及其他桌面+ Firefox）。这是为什么？这是Chrome Android中的错误吗？

使用Blob在Chrome Moble上设置视频源

0 个答案: