i'm trying to download complete videos, making blob links for them before actually playing them or adding them to DOM, here the bit of my code that does that

 const init = {method: 'GET',mode: 'no-cors',cache: 'default'};
 const request = new Request(mp4Url);

fetch(request, init)
.then((response) =>  response.blob())
.then(data=>
  {
    let vid = URL.createObjectURL(data)
    let htmlString =`
    <video id="video-${id}" class="video_player" src="${vid}" autoplay muted loop>
    </video>`

    let videoElem = parser.parseFromString(htmlString, "text/html");
    videoRoot.appendChild(videoElem.firstChild.children[1].firstChild)
  }
  );

i'm getting

blob:http://127.0.0.1:5501/b62d9895-a432-487e-b1bc-4c670fe4b30c 
net::ERR_REQUEST_RANGE_NOT_SATISFIABLE

from chrome and this from firefox

HTTP “Content-Type” of “application/x-unknown-content-type” is not supported. Load of media resource blob:http://127.0.0.1:5501/b62d9895-a432-487e-b1bc-4c670fe4b30c  failed.

is something like this really possible?