Question

所以我制作了一个脚本来显示播放器外的当前时间，一切正常。问题是它以微秒为单位呈现，我想将其显示为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

Answer 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

Answer 2

我遇到了与您相同的问题，因此我创建了一个简单的方程式来解决它

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

例如

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

输出为74，并将其从分钟和秒转换为秒，并且它是整数，以便curretTime接受它

Answer 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)

希望这个解决方案能帮到你。

VideoJs以分钟和秒为单位显示当前时间，而不是微秒

3 个答案: