VideoJs显示当前时间的单位是分和秒,而不是微秒



所以我制作了一个脚本来显示播放器外部的当前时间,一切都运行良好。问题是它在微秒内呈现,我想将其显示为H:MM:SS

下面是代码,这样你就可以理解我在说什么了:

<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

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;

然后显示xy

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

我遇到了和你一样的问题,我创建了一个简单的方程来解决它,这里是

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

例如

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

输出为74,它从分和秒转换为秒,并且它是一个整数,因此curretTime不接受它

您可以使用嵌套选项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)

最新更新