VideoJs 以分钟和秒而不是微秒显示当前时间答案

【问题标题】：VideoJs display current time in minutes and seconds instead of microsecondsVideoJs 以分钟和秒而不是微秒显示当前时间
【发布时间】：2015-07-17 07:39:44
【问题描述】：

所以我制作了一个脚本来在播放器之外显示当前时间，一切正常。问题是它以微秒为单位呈现，我想将其显示为 H:MM:SS

这里是代码，所以你可以理解我在说什么：

HTML

<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>

<video id="MY_VIDEO_1" class="video-js vjs-default-skin" autoplay controls preload="auto" width="800" height="450" data-setup="{}">
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
    <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
      <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
Current time: <div id="current_time"></div>

JavaScript

setInterval(function() {
  var myPlayer = videojs('MY_VIDEO_1');
  var whereYouAt = myPlayer.currentTime();
  document.getElementById("current_time").innerHTML = whereYouAt;
}, 400);

还有一个工作示例：http://codepen.io/BeBeINC/pen/VLBPLz

【问题讨论】：

标签： javascript jquery video.js

【解决方案1】：

currentTime 以秒为单位返回带两位小数的时间。如果要将其转换为minutes:seconds 格式，则需要在脚本中进行：

var minutes = Math.floor(whereYouAt / 60);   
var seconds = Math.floor(whereYouAt - minutes * 60)

这将使时间格式为 0:0，这不是很明显。它的格式应该是00:00。所以，我们需要添加一个前导零：

var x = minutes < 10 ? "0" + minutes : minutes;
var y = seconds < 10 ? "0" + seconds : seconds;

然后我们显示x 和y。

document.getElementById("current_time").innerHTML = x + ":" + y;

最终脚本：

setInterval(function() {
    var myPlayer = videojs('MY_VIDEO_1');
    var whereYouAt = myPlayer.currentTime();
    var minutes = Math.floor(whereYouAt / 60);   
    var seconds = Math.floor(whereYouAt - minutes * 60)
    var x = minutes < 10 ? "0" + minutes : minutes;
    var y = seconds < 10 ? "0" + seconds : seconds;

    document.getElementById("current_time").innerHTML = x + ":" + y;

}, 400);

这是更新后的codepen

【讨论】：

如果您希望秒数均匀（每隔一秒有规律地计时），您需要将 setInterval 时间设置为类似于500 这样它每半秒运行一次代码。如果您使用400，则第一秒将延迟 200 毫秒更改。 Update codepen
版本中有时间格式化功能，但是不知道怎么用。见docs.videojs.com/module-format-time.html

【解决方案2】：

我和你有同样的问题，我在这里创建了一个简单的方程来解决它

  min = minutes ;
  sec = seconds;
  vid.currentTime =  min * 60 + (sec/60) * 60 ;

例如

  min = 1 ;
  sec = 14 ;
  vid.currentTime =  min * 60 + (sec/60) * 60 ;

输出是 74，它从 min 和 seconds 转换为 seconds，它是一个整数，因此 curretTime 确实接受它

【讨论】：

【解决方案3】：

您可以为此使用嵌套选项setFormatTime 并在那里做任何您想做的事情。（我在下面举一个例子，我想你会明白你的情况需要做什么。

function customTimeFormat(seconds, guide) {
        seconds = seconds < 0 ? 0 : seconds;
        let s = Math.floor(seconds % 60);
        let m = Math.floor(seconds / 60 % 60);
        let h = Math.floor(seconds / 3600);
        let gm = Math.floor(guide / 60 % 60);
        let gh = Math.floor(guide / 3600); // handle invalid times

        if (isNaN(seconds) || seconds === Infinity) {
            // '-' is false for all relational operators (e.g. <, >=) so this setting
            // will add the minimum number of fields specified by the guide
            h = m = s = '-';

            return h + ':' + s;
        } // Check if we need to show hours


        h = h > 0 || gh > 0 ? h + ':' : ''; // If hours are showing, we may need to add a leading zero.
        // Always show at least one digit of minutes.

        m = ((h || gm >= 10) && m < 10 ? '0' + m : m) + ':'; // Check if leading zero is need for seconds

        h = parseInt(h) < 10 ? '0' + h : h;
        s = parseInt(s) < 10 ? '0' + s : s;

        return h + m + s;
}

videojs.setFormatTime(customTimeFormat)

我希望这个解决方案对你有所帮助。

【讨论】：