html 视频标签的 JS currentTime 不适用于 chrome

Question

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

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

这对大多数浏览器都可以正常工作，但不适用于 chrome。

Answer 1

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

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

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

JSFiddle demo

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

Answer 2

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

Answer 3

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

的方式

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

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

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

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

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

在 FF 和 Edge 中工作正常，但在 Chrome 中不起作用。

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

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

html 视频标签的 JS currentTime 不适用于 chrome

JS currentTime for html video tag is not working on chrome

html

javascript

jquery

google-chrome

html5-video