cannot set video.currentTime in html5 video using jquery/javascript

Question

Either from the console or from in my tags, I cannot set the current time of an html5 video element with javascript. I also am using jQuery but I do not know if that is relevant to the issue. I am using Google Chrome 24.0.1312.57 on Ubuntu; below is an example of what I am trying to do

<html>
<script type="text/javascript">
    var video = document.getElementById("video");
    var videoSourceString = "<source src=http://URL:PORT" + path + " type='video/mp4'></source>";
    $(video).html(videoSourceString);
    video.load();
    var frameRate = 24;
    video.currentTime += 1/frameRate;// doesn't do anything, leaves currentTime same as before
</script>
<body>
<video id="video">
</video>
</body>
</html>

The video plays and pauses fine, but whenever I try to manually change the time it does not work.

I already looked at HTML5 Video - Chrome - Error settings currentTime and no such errors are present in the console, in fact it does not display any errors. I also cannot change the currentTime from the console using video.currentTime += 1 or document.getElementById("video").currentTime = 0 with any number.

Thank you very much!

I would wait until the canplay (or loadedmetadata or durationchanged) events fire before setting the currentTime — Offbeatmammal, Feb 28 '13 at 01:23
I found something that might be related with chrome: https://stackoverflow.com/a/54336444/6322589 — lucasvw, Jan 23 '19 at 22:15

score 12 · Accepted Answer · answered Feb 28 '13 at 20:25

12

Even though I was waiting until the loadedmetadata event was reached, it turned out to be the lack of support for HTTP byte range requests by web.py that was preventing seeking. HTTP Byte Range requests are required to seek in HTML5 video and it turns out web.py does not support them, so I served the video using Apache and it worked flawlessy. Thank you for your responses!

answered Feb 28 '13 at 20:25

zanman

265
3
12

1

you're comment regarding running via apache really helped! Thanks! (I was running using `php -s localhost:9000` but didn't work) – sk8terboi87 ツ Sep 09 '18 at 12:26
Got similar issue on node.js as a backed and solved by simply adding `res.set("Accept-Ranges", "bytes");` while sending video stream to client – lviggiani Feb 24 '22 at 17:17

cannot set video.currentTime in html5 video using jquery/javascript

1 Answers1

Linked