XHR加载视频
在不详细了解我为什么使用 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>
Without getting into the details of why I'm using XHR, can anyone tell me how to get the below to work doing so? My goal is to first load the video data and then place it into the video tag's source.
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
- 我，回答你同样的问题。
如果你阅读了我的整个答案并且通过该链接，您会看到 Google Chrome 实际上尚不支持
responseType = "blob"。我为您提供了一个假设的实现，并使用responseType = "arraybuffer"将您链接到解决方法。— Me, responding to your same question.
If you read my whole answer and the link, you'd see Google Chrome doesn't actually support
responseType = "blob"yet. I gave you a hypothetical implementation and linked you to a workaround usingresponseType = "arraybuffer".你这里有两个问题，
req.responseType = "blob";应该出现在之后req.open(...)设置 url 后，您还应该
URL.revokeObjectURL。请注意，在 Chrome 中，它们仍然具有webkitURL而不是URL。You have two problems here,
req.responseType = "blob";should come afterreq.open(...)You should also
URL.revokeObjectURLonce you set the url. Note that in Chrome they still havewebkitURLrather thanURL.