用于 html 视频标签的 JS currentTime 在 chrome 上不起作用

Question

我想在单击特定按钮时捕获 HTML5 视频的当前运行时间。 这是我的代码

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

这适用于大多数浏览器，但不适用于 chrome。

Answer 1

问题（至少关于 Chrome）可能出在服务器端。 将Header set Accept-Ranges bytes 放入您的.htaccess（参见this answer）

Answer 2

更新（2015 年 10 月）：我发现这实际上并不是 Chrome 对 currentTime 的使用，而是它处理 video.load() 的方式。

Here is a bug report on the issue. 在这一点上已经超过 2.5 年，并且不断被推回到其他报告中，但这是一个众所周知的错误。如果他们此时还没有修复它，那么我不相信它在他们的优先级列表中排名靠前。

此错误已合并到问题 #31014，该问题早在 15 年 8 月就被标记为已修复，但似乎人们（包括我自己）仍然遇到此问题。

这似乎源于这样一个事实，即如果您尝试向同一个 URL 发出多个请求以检索任何媒体元素（音频或视频），则网络连接似乎在 Chrome 中挂起。我对此进行了测试，果然，这正是我的情况。

人们在上面的那个帖子中报告了几种解决方法，但我无法让它们中的任何一个起作用。

---

currentTime 在 Chrome 中无法正常工作。我今天用 videojs 测试了这个，因为这是唯一一个抛出问题的浏览器，然后切换到标准的 HTML5 视频播放器，并遇到了同样的问题。

在 FF 和 Edge 中运行良好，但在 Chrome 中无法运行。

更奇怪的是，即使不加载视频也不会引发错误。至少对于 videojs，它会引发无法加载的错误。

I filed a bug report with videojs today，以为是播放器的问题，但仔细考虑后，似乎是 Chrome 的问题。希望它至少会为标准 HTML5 播放器抛出错误。

Answer 3

确保您准备好文档上的视频元素：

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

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

JSFiddle demo

在 Windows 上使用 Chrome、Firefox 和 IE10 测试。