How to fix 'HTML5 currentTime always sets to zero' - reactjs

Question

I am building a videoplayer in reactjs.I have my custom sliderbar.When I click on the sliderbar,I am getting the value of the sliderbar and calculating current time of the video and setting the currenttime using document.getElementById('video').currentTime = value.
But each time when I give an input to sliderbar,the video current time is setted to 0.
But this works fine in firefox with a warning message "The Operation was aborted"
It not working in chrome.
const pos = this.seek_bar.value;
this.video = document.getElementById("video");
let new_time = (pos / 100) * this.video.duration;
if (!isNaN(new_time)) this.video.currentTime = new_time;
this.video.addEventListener("timeupdate", () => {
let value = (this.video.currentTime / this.video.duration) * 100;
if (!isNaN(value)) {
this.seek_bar.value = value;
}
});
I want the chrome to set the current time I provide.Please help me to solve this.

Answer 1

Got It.
The problem was with streaming the video from server.
Changed the existing code to
video(req, res) {
const videoPath = req.query.videoPath;
const stat = fs.statSync(videoPath);
const fileSize = stat.size;
const range = req.headers.range;
if (range) {
const parts = range.replace(/bytes=/, "").split("-");
const start = parseInt(parts[0], 10);
const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
const chunksize = end - start + 1;
const file = fs.createReadStream(videoPath, { start, end });
const head = {
"Content-Range": `bytes ${start}-${end}/${fileSize}`,
"Accept-Ranges": "bytes",
"Content-Length": chunksize,
"Content-Type": "video/mp4"
};
res.writeHead(206, head);
file.pipe(res);
} else {
const head = {
"Content-Length": fileSize,
"Content-Type": "video/mp4"
};
res.writeHead(200, head);
fs.createReadStream(videoPath).pipe(res);
}
}