我怎样才能像这样 00:25/00:30 显示视频当前和持续时间？

Question

我想以不同的格式显示视频 currentTime 和 duration。

现在的显示方式是：

0:9 / 0:33

我希望它像这样显示：

00:09 / 00:33

或者如果视频时长超过 1 分钟

03:10 / 12:27

我现在拥有的当前代码

    video.on('timeupdate', function() {

        // Set to minute and seconds
        var time = video[0].currentTime;
        var minutes = Math.floor(time / 60);   
        var seconds = Math.floor(time);

        // Set the current play value
        currentTimer.text(minutes + ':' + seconds);
    });

    video.on('loadedmetadata', function() {

        // Set to minute and seconds
        var time = video[0].duration;
        var minutes = Math.floor(time / 60);   
        var seconds = Math.floor(time);  

        // Set the video duration
        durationTimer.text(minutes + ':' + seconds);
    });

Answer 1

这段代码应该可以满足您的需求：

function format(s) {
    var m = Math.floor(s / 60);
    m = (m >= 10) ? m : "0" + m;
    s = Math.floor(s % 60);
    s = (s >= 10) ? s : "0" + s;
    return m + ":" + s;
}

alert(format(120));
alert(format(250));
alert(format(31));

Answer 2

</body>
<script>
 var myVideoPlayer = document.getElementById('video-element'),
 meta = document.getElementById('meta');
 
 myVideoPlayer.addEventListener('loadedmetadata', function () {
 var duration = myVideoPlayer.duration;
 meta.innerHTML = "Duration is " + duration.toFixed(2) + " seconds."
 });
</script>

<div class="col-md-12">
       <div class="col-md-8" id='player'>
     <video style="width:100%;height:auto;"  id='video-element' controls preload controlsList="nodownload"> <source src="../videos/SampleVideo_1280x720_5mb.mp4" id="s1" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="../videos/sample1.ogg" type='video/ogg; codecs="theora, vorbis"'> </video>
    </div>
    <div class="col-md-4">
     <div class="box-body">
      <hr style="margin: 28px 0px 10px;">
      <div class="col-md-12">
       <video width="168" height="94"  id='cc'> <source src="../videos/SampleVideo_1280x720_5mb.mp4" id="s1" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
        <source src="../videos/sample1.ogg" type='video/ogg; codecs="theora, vorbis"'> 
       </video>
      </div>
     </div>
    </div>
    <div id="meta"></div>
   </div>

我怎样才能像这样 00:25/00:30 显示视频当前和持续时间？

How can i display the video current and duration time like this 00:25/00:30?

html

jquery

html5-video