CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chromehtml5-video
user3917039
user3917039

Reputation: 241

JS currentTime for html video tag is 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.

Upvotes: 7

Views: 11162

Answers (3)

Dave Voyles
Dave Voyles

Reputation: 4605

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.

Upvotes: 6

yPhil
yPhil

Reputation: 8357

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

Upvotes: 5

MrUpsidown
MrUpsidown

Reputation: 22490

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.

Upvotes: 3

Related Questions