在实际加载时使用请求的 XHR 数据答案

【问题标题】：Using requested XHR data while actually loading在实际加载时使用请求的 XHR 数据
【发布时间】：2019-12-16 23:30:04
【问题描述】：

也许我只是弄错了，但是...我通过 ajax (180mb - 500mb) 请求“大”文件。我认为我能够在实际加载时使用URL.createObjectURL 方法获取和使用数据？我需要在 5 秒内获得请求的数据，但实际加载需要 16 秒。

ajax 请求
xhr.onload（在 5 秒内或更快的时间内工作，本地，但不是现场）
在 onload（或进度，onreadystatechange（我试过））中，我使用URL.createObjectURL(xhr.response) 获取数据

var nxtclp = new XMLHttpRequest();

nxtclp.onload = function() {
 get_src = URL.createObjectURL(nxtclp.response);
 that.preloadSource = get_src;
};

nxtclp.open("GET", "media/vid.mp4");
nxtclp.responseType = "blob";
nxtclp.send();

有没有办法在加载时播放数据？

【问题讨论】：

首先使用 ajax 作为媒体文件的原因是什么？
它是一部交互式电影……所以在实际剪辑的“90%”处，用户可以选择电影如何继续播放……如果他与决策元素我知道下一个剪辑的文件是什么，并提供从一个剪辑到另一个剪辑的流畅过渡，我没有在剪辑末尾加载文件，我在与决策元素交互时使用 ajax 加载 dem，所以我有 6 秒预加载下一个文件 - 这就是我尝试过的。
仍然没有解释为什么需要ajax
该死的，从来没有看到过这个答案——除了 ajax 你还知道什么其他的解决方案？

标签： javascript jquery ajax xmlhttprequest

【解决方案1】：

在<video> 元素处使用autoplay 属性

autoplay

一个布尔属性；如果指定，视频会自动开始播放尽快播放，不要停下来完成加载数据。

<video controls autoplay src="http://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm">
</video>

或者，使用javascript

var video = document.createElement("video");
video.autoplay = true;
video.controls = true;
video.onloadedmetadata = (e) => {
  console.log(video.readyState);
  document.body.appendChild(e.path[0])
}
video.src = "http://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm";

<body>
</body>

【讨论】：