Question

如果没有深入了解我为何使用XHR的细节，有人能告诉我如何让以下工作吗？我的目标是首先加载视频数据，然后将其放入视频标记的来源。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function() {
    var elem = document.getElementById("myVideo");
    var req = new XMLHttpRequest();
    req.onload = function () {
        var blob_uri = URL.createObjectURL(this.response);
        elem.appendChild(document.createElement("source"))
            .src = blob_uri;
    };
    req.responseType = "blob";
    req.open('GET', 'http://www.latentmotion.com/player/h264/clips/16154_2832659676_170_180.mp4', false);
    req.send(null);
};
</script>
</head>
<body>
<video id="myVideo" width="600" height="334" controls></video>
</body>
</html>

Answer 1

在执行responseType =“blob”之前，请参阅Google this workaround。

- Me, responding to your same question.

如果您阅读了我的整个答案和链接，您会发现Google Chrome实际上并不支持responseType = "blob"。我给了您一个假设的实现，并使用responseType = "arraybuffer"将您与解决方法联系起来。

Answer 2

这里有两个问题，

req.responseType = "blob";应该在 req.open(...)

来
您正在执行跨站点请求，出于安全原因可能会失败。

设置网址后，您还应该URL.revokeObjectURL。请注意，在Chrome中，他们仍然使用webkitURL而不是URL。

XHR加载视频

2 个答案: