Search code examples
javascriptjqueryajaxxmlhttprequest

Using requested XHR data while actually loading

maybe i just got it wrong but... im requesting "large" files via ajax (180mb - 500mb). i thought that im able to fetch and use the data with the method URL.createObjectURL while its actually loading? i need the requested data within 5 seconds but its acutually loading 16 seconds.

  1. ajax request
  2. xhr.onload (worked within 5 seconds or faster, locally, but not live)
  3. within the onload (or progress, onreadystatechange (i tried)) i used URL.createObjectURL(xhr.response) to get the data
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();

is there any way to playback data while loading ?

Solution

  • Use autoplay attribute at <video> element

    autoplay

    A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.

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

    alternatively, using 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>