So I made a script to display the current time outside of the player, and everything works fine. The problem is that it renders in microseconds and I want to display it as H:MM:SS

Here's the code so you can understand what I'm talking about:

HTML

<link href=".12/video-js.css" rel="stylesheet">
<script src=".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=".mp4" type='video/mp4'>
    <source src=".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="/" 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);

And a working example:

So I made a script to display the current time outside of the player, and everything works fine. The problem is that it renders in microseconds and I want to display it as H:MM:SS

Here's the code so you can understand what I'm talking about:

HTML

<link href="http://vjs.zencdn/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn/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/v/oceans.mp4" type='video/mp4'>
    <source src="http://vjs.zencdn/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./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);

And a working example: http://codepen.io/BeBeINC/pen/VLBPLz

• javascript
• jquery
• video.js

3 Answers 3

currentTime returns time in seconds with two decimal places. If you want to convert it to minutes:seconds format, you will need to do it in script :

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

This will make the time format 0:0, which is not very appreciable. It should be of the format 00:00. So, we need to add a leading zero :

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

And then we display x and y.

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

Final Script :

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

Here is the updated codepen

i had the same problem as you and i created a simple equation to solve it here it is

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

for example

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

the output is 74 and it is converted from min and seconds into seconds and it is an integer so that the curretTime does accept it

You can use the nested option setFormatTime for that and do whatever you want there. (I give one example below, I think you will understand what needs to be done in your case.).

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)

I hope this solution will help you.