Reputation: 17053
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>
Upvotes: 4
Views: 6504
Reputation: 3433
You have two problems here,
req.responseType = "blob";
should come after req.open(...)
You should also URL.revokeObjectURL
once you set the url. Note that in Chrome they still have webkitURL
rather than URL
.
Upvotes: 0
Reputation: 35830
Refer to this workaround for Google Chrome until responseType = "blob" is implemented.
— 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 using responseType = "arraybuffer"
.
Upvotes: 2