Error playing video with Javascript and HTML: Failed to load resource

I’m trying to play a video with HTML and Javascript. A video is generated through some local processes, and once done, I have a Javascript that triggers the video playback right away and displays it:

document.getElementById("video").innerHTML = "<video style="margin-right:"+videospace+"" height="300" controls><source src="video.mp4" type="video/mp4"></source></video>";
document.getElementById("video").style.display = "inline";

It works for some videos (apparently smaller sizes/resolutions), but when a video is slightly larger (2600×800), it keeps looping and never loads/plays it (maybe due to the reason that once the video is still sitting on disk and given it’s slightly larger, the video player doesn’t get enough time/buffering to load it). And Javascript shows this error:

Failed to load resource: net::ERR_REQUEST_RANGE_NOT_SATISFIABLE video

How to solve it?