XHR to load video
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.
http://jsfiddle.net/u2vhG/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/j开发者_JS百科avascript">
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>
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".
You have two problems here,
req.responseType = "blob";should come afterreq.open(...)- You are doing a cross-site request, which might fail for security reasons.
You should also URL.revokeObjectURL once you set the url. Note that in Chrome they still have webkitURL rather than URL.
加载中,请稍侯......
精彩评论