I want to capture the current run time of a HTML5 video when a specific button is clicked. Here is my code

var vid = document.getElementById("video1");    
$('#cap-cue').click(function(){
    var curtime = vid.currentTime;
    alert(curtime);
});

This is working perfectly for most of the browsers but not working on chrome.

I want to capture the current run time of a HTML5 video when a specific button is clicked. Here is my code

var vid = document.getElementById("video1");    
$('#cap-cue').click(function(){
    var curtime = vid.currentTime;
    alert(curtime);
});

This is working perfectly for most of the browsers but not working on chrome.

• javascript
• jquery
• html
• google-chrome
• html5-video

• are you getting any errors in the browser console when this doesn't work? – Scriptable Commented Jan 15, 2015 at 13:30
• It would be easier if you provide a jsFiddle example. – skay- Commented Jan 15, 2015 at 13:35
• There is no reason for this not to work. Try to log curtime and also vid. Did you do that on document ready? – MrUpsidown Commented Jan 15, 2015 at 14:12
• possible duplicate of Setting HTML5 audio position – yPhil Commented Aug 13, 2015 at 12:18

3 Answers 3

UPDATE (October 2015): I discovered it is not actually with Chrome's use of currentTime but instead with the way it handles video.load().

Here is a bug report on the issue. It's more than 2.5 years old at this point, and keeps getting pushed further and further back into other reports, but is a well known bug. If they haven't fixed it by this point, then I'm not confident that it is high on their priority list.

This bug was merged into issue #31014 which was marked as fixed back in August of '15, but it appears people (myself included) are still having the issue.

It seems to stem from that fact that if you attempt to make multiple requests to the same URL to retreive any media element (audio or video), that the network connection seems to hang in Chrome. I tested this out, and sure enough, that's exactly what was happening in my case.

People have reported several workarounds in that thread above, but I couldn't get any of them to work.

currentTime does not work correctly in Chrome. I tested this with videojs today, as that was the only browser throwing the issue, then switched to the standard HTML5 video player, and ran into the same issue.

Works fine in FF and Edge, but does not work in Chrome.

Even more odd, doesn't throw an error, even about not loading a video. At least with videojs it throws an error about being unable to load.

I filed a bug report with videojs today, thnking it had to do with their player, but after more consideration, it seems to be a Chrome issue. Wish it would at least throw an error for the standard HTML5 player.

The problem (at least regarding Chrome) is probably on the server side. Put Header set Accept-Ranges bytes in your .htaccess (see this answer)

Make sure you get the video element on document ready:

$(function() {
    var vid = document.getElementById("vid");  
});

$('#getTime').on('click', function() {
    var currentTime = vid.currentTime;
    $('#currentTime').html(currentTime);
});

JSFiddle demo

Tested on Windows with Chrome, Firefox and IE10.