I have a FPS (frames per second) of 30. I have a total FPS so far, lets say 1020. I want to display this as a formatted timecode, as below.

var fps = 30;
var currentFrame = 1020;

var resultString = ; // HH:MM:SS:FF

Are there any Javascript functions built in for formatting like this?

To be clear, I need the string to be formatted as such: HH:MM:SS:FF

I have a FPS (frames per second) of 30. I have a total FPS so far, lets say 1020. I want to display this as a formatted timecode, as below.

var fps = 30;
var currentFrame = 1020;

var resultString = ; // HH:MM:SS:FF

Are there any Javascript functions built in for formatting like this?

To be clear, I need the string to be formatted as such: HH:MM:SS:FF

• javascript
• string
• time
• formatting

• 1 What's your timecode mode? Are you concerned about drop frame? – znap026 Commented Apr 25, 2015 at 10:50

7 Answers 7

Are you looking for a built-in JS function?..

var FF = currentFrame % fps;
var seconds = (currentFrame - FF) / fps;
var SS = seconds % 60;
var minutes = (seconds - SS) / 60;
var MM = minutes % 60;
var HH = (minutes - MM) / 60;

There you go.

It can be done in much simpler way:

function displayTime(currentFrame) {
    var fps = 30;
    var h = Math.floor(currentFrame/(60*60*fps));
    var m = (Math.floor(currentFrame/(60*fps))) % 60;
    var s = (Math.floor(currentFrame/fps)) % 60;
    var f = currentFrame % fps;
    return showTwoDigits(h) + ":" + showTwoDigits(m) + ":" + showTwoDigits(s) + ":" + showTwoDigits(f);
}

function showTwoDigits(number) {
    return ("00" + number).slice(-2);
}

console.log("Frame 1020 will be displayed as " + displayTime(1020));

Frame 1020 will be displayed as 00:00:34:00

showTwoDigits
This help function takes a number (example: 6), adds "00" before it, which makes it a string (example: "006"). Then it slices back 2 positions from the end (will give "06").

displayTime
var h
It calculates hours by dividing the frames by 60*60*30 frames per hours. An hour has 60*60*30 frames.
var m
Minutes are calculated in the same way by dividing it by 60*30 frames per minute. But note here that this could result in a number like 80 minutes, because it is the TOTAL amount of minutes. The script has to take in account only the remainder after dividing this amount by 60. Here the modulus es into play. 80 % 60 will give 20, the number we are looking for.
var s
In a similar way the seconds are calculated by dividing the frames by 30 frames per second and then take it modulus 60 (so that 65 seconds will be represented as 5).

Try this:

    var fps = 30;
    var currentFrame = 169;
    var SS = Math.floor(currentFrame / fps);
    var MM = Math.floor(SS / 60);
    var HH = Math.floor(MM / 60);
    var FF = currentFrame - (SS * fps);

    function pad(str, width, what, left) {
        str = String(str);
        what = String(what);
        var w = width - str.length;

        if (left) {
            return (new Array(w + 1)).join(what) + str;
        } else {
            return str + (new Array(w + 1)).join(what);
        }
    }

    var i,
        timecode = [HH, MM, SS, FF];

    for (i = 0; i < timecode.length; i += 1) {
        timecode[i] = pad(timecode[i], 2, 0, true);
    }

    var resultString = timecode.join(':'); // HH:MM:SS:FF

you can also use the date object see here. Just make something like:

var d = new Date( yourframetime + new Date().getTime() );
var str = d.getHours()+':'+ d.getMinutes()+ ':' + d.getSeconds() + ....... 

than you can use all the string functions of the object, or make your own with it.

Old post, but I was using this recently and a bination of Alexander's and Lucas's code give the correct results. The checked version actually breaks on really large frame counts ( I think due to Math.floor).

Code is:

var fps = 30;
var currentFrame = 169;
var FF = currentFrame % fps;
var seconds = (currentFrame - FF) / fps;
var SS = seconds % 60;
var minutes = (seconds - SS) / 60;
var MM = minutes % 60;
var HH = (minutes - MM) / 60;

function pad(str, width, what, left) {
    str = String(str);
    what = String(what);
    var w = width - str.length;

    if (left) {
        return (new Array(w + 1)).join(what) + str;
    } else {
        return str + (new Array(w + 1)).join(what);
    }
}

var i,
    timecode = [HH, MM, SS, FF];

for (i = 0; i < timecode.length; i += 1) {
    timecode[i] = pad(timecode[i], 2, 0, true);
}

var resultString = timecode.join(':'); // HH:MM:SS:FF

For Anyone interested with the swift version of the showTwoDigits function, here is a working code sample:

func showTwoDigits(number:Float) -> (String){
        var string = ("00" + String(format:"%.f", number))
        var range = Range(start: (advance(string.endIndex, -2)), end: string.endIndex)
        var cutStr = string.substringWithRange(range)
        return cutStr
    }

This function converts to HH:MM:SS:FF correctly :

var convertTime = function (frames, fps) {
    fps = (typeof fps !== 'undefined' ?  fps : 30 );
    var pad = function(input) {return (input < 10) ? "0" + input : input;},
        seconds = (typeof frames !== 'undefined' ?  frames / fps : 0 );
    return [
        pad(Math.floor(seconds / 3600)),
        pad(Math.floor(seconds % 3600 / 60)),
        pad(Math.floor(seconds % 60)),
        pad(Math.floor(frames % fps))
    ].join(':');
}

Demo

var convertTime = function (frames, fps) {
    fps = (typeof fps !== 'undefined' ?  fps : 30 );
    var pad = function(input) {return (input < 10) ? "0" + input : input;},
        seconds = (typeof frames !== 'undefined' ?  frames / fps : 0 );
    return [
        pad(Math.floor(seconds / 3600)),
        pad(Math.floor(seconds % 3600 / 60)),
        pad(Math.floor(seconds % 60)),
        pad(Math.floor(frames % fps))
    ].join(':');
}

document.body.innerHTML = '<pre>' + JSON.stringify({
    5 : convertTime(5),
    50 : convertTime(50),
    126 : convertTime(126),
    1156 : convertTime(1156),
    9178 : convertTime(9178),
    13555 : convertTime(13555)
}, null, '\t') +  '</pre>';

See also this Fiddle.