Javascript | HTML5 XHR XMLHTTPRequest将视频流式传输为正在下载的Blob文件

Question

我使用javascripts HTML5 blob支持将流视频作为blob文件存在问题。

我想要实现的是在使用javascript实时流式传输blob文件，然后在浏览器中完全下载/预加载。 （这样点击播放立即开始即时播放）

它应该作为blob文件流式传输，而是点击＆＃34; Play＆＃34;在视频盒/容器上导致XHR 200 ok响应，然后没有任何反应。

这是我的代码：

<video controls="" preload="auto" id="_video">
<source src="" type="video/mp4">
<source src="" type="video/webm">
<source src="" type="video/ogg">
</video>
<script>
window.onload = function() {
var video_id = "_video";
var video_url = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
var video_type = "video/mp4";

var xhr = new XMLHttpRequest();
xhr.open('GET', video_url, true);
xhr.responseType = 'blob';
//xhr.responseType = "arraybuffer";

xhr.onload = function() {
document.getElementById(video_id).src = URL.createObjectURL(xhr.response);
//document.getElementsByTagName('source')[0].src = URL.createObjectURL(xhr.response); // this does not work don't know why
/*need to check if webm or ogg or MP4 and make the output one of them */
};
</script>

我期待能够做的是当我访问页面时单击播放，视频应该开始作为blob流式传输。但我似乎没有任何错误或问题所以我对这个问题有点傻眼。