Fetch a blob URL of the static video/mp4 file and video.load() throws ERR_REQUEST_RANGE_NOT_SATISFIABLE

Question

I'm trying to use a blob URL achieved with fetch() in Javascript and the returning blob URL(text/plain) from response is going to original file URL before URL.revokeObjectURL() is called.

However, I faced ERR_REQUEST_RANGE_NOT_SATISFIED error from console when I changed the src attribute of a element with blob URL and tried to load the video before I called revokeObjectURL().

But the video that I want to use this time is a static .mp4 file which is can be retrieved with an URL.

Any hint to get this over with?

I had tried with a .m3u8 source in a same way and it was okay.

function fetchVideo(url, opt) {
  return fetch(url, opt).then(function(response) {
    return response.blob();
  });
}

function replaceSrc(blob, source) {
    bloburl = URL.createObjectURL(blob);
    source.setAttribute('src', bloburl);
    source.removeAttribute('data-src');
    $(source).closest('video').load();
    URL.revokeObjectURL(bloburl);
}

function changeVideoSource(videoElement) {
    if(videoElement[0] != undefined) {
        var source = videoElement[0].getElementsByTagName('source')[0];
        var src = source.getAttribute('data-src');
        var fetchHeaders = new Headers({
            "Content-Type": "text/plain"
        });
        var fetchOpt = {
            method: 'GET',
            headers: fetchHeaders,
            mode: 'no-cors'
        };
        fetchVideo(src, fetchOpt).then(function(blob){
            replaceSrc(blob, source);
        });
    }
}

<video autoplay muted preload="auto">
    <source id="vidSrc" data-src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
</video>