CODEWITHSUNDEEP
javascriptjqueryvideo.js
BeBe
BeBe

Reputation: 127

VideoJs display current time in minutes and seconds instead of microseconds

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

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

Upvotes: 2

Views: 9608

Answers (3)

Norayr Baghdasarov
Norayr Baghdasarov

Reputation: 425

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.

Upvotes: 0

RYOK
RYOK

Reputation: 473

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

Upvotes: 0

Patel
Patel

Reputation: 1478

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

Upvotes: 13

Related Questions