javascript - HTML5 视频在 Javascript 中显示时间 - 尤其是秒

标签 javascript html video

我想询问在 Javascript 中显示 HTML5 视频时间的最佳方法。我可以用 Javascript 计算小时、分钟和秒,但是!!!秒数显示有时更快,有时更慢,具体取决于触发 video.ontimeupdate 事件。我想每秒正确显示视频时间。换句话说 - 我想达到每秒精确显示时间的目的,而不是像 0:00:01 显示一秒半,0:00:02 显示一秒,然后 0:00:03 半秒,然后 0 :00:04 一秒钟等等。只是随机的。有没有办法将秒完全显示为秒,或者这是无法实现的行为?

编辑:好的,我发布了我的代码,但我不认为它会更清楚。我要求正确显示视频时间的每一秒时间,而不是有些秒快一些慢。我知道有一个函数setInterval,但它与视频时间无关。这是代码:

var time=window.document.getElementById('time'); //time is element <div id="time"></div> showing the time
var st; //show time
video.ontimeupdate=function(){
  ct=parseInt(video.currentTime); //ct is current time
  if(st!=ct) //little effort to optimize processing and showing the time
  {
    st=ct;
    var hours=parseInt(st/3600);
    var minutes=parseInt((st%3600)/60);
    var seconds=parseInt(st%60);
    if((''+minutes).length==1)minutes='0'+minutes;
    if((''+seconds).length==1)seconds='0'+seconds;
    time.innerHTML=''+hours+':'+minutes+':'+seconds;
  }
};

我认为代码是正确的,但是在触发 ontimeupdate 事件时存在一些不规则之处。也许我有一些解决方案 - 如果按下播放按钮,则使用 setInterval 每秒精确显示时间,如果按下暂停或停止 - clearInterval(intervalId)。如果有人有更精确的解决方案,我将不胜感激。

最佳答案

我似乎没有任何代码可以使用,所以我无法真正回答这个问题。根据您所说,您有代码,但在显示正确的时间时遇到问题。

我也不明白你想要完成什么,因为 HTML5 有一个标准的视频标签(参见 here )

这显示秒等。

现在显示一个计时器(这仅用于演示目的,实际上不相关,但认为它可能有帮助)

    var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

由于我有零代码可供引用 - 我也会推荐这个: https://github.com/videojs/video.js/

祝您好运,如果您编辑并发布代码,我可能能够理解更多,谢谢!

关于javascript - HTML5 视频在 Javascript 中显示时间 - 尤其是秒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39963898/

相关文章:

html - CSS HTML 如何忽略非 ie7 或 ie8 的一些 css

java - 在 Linux 上自动转码 H.264 视频

video - 如何使用ffmpeg在前景文本的视频上添加填充

javascript - 帐号与 Accountid - Dynamics CRM 中的 iFrame

javascript - 有没有办法在 react 最终形式中禁用嵌套字段名称功能?

javascript - 如果选中复选框,如何获取行数据

python - 如何使用 OpenCV VideoWriter 将视频保存到特定目录 -- python

javascript - 错误 : [ng:areq] http://errors. angularjs.org/1.2.25/ng/areq?

html - 在应用栏外使用 Windows 8 默认图标集

jquery - 如何在悬停时为圆形图像添加边框? CSS 或 jquery