logo标签列表

从帧创建时间码

javascriptstringtimeformatting
5

我的FPS（每秒帧数）是30。到目前为止，我有一个总FPS，比如说1020。我想将它显示为以下格式的时间码。

var fps = 30;
var currentFrame = 1020;

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

有没有内置的Javascript函数可以格式化字符串？我需要将字符串格式化为HH:MM:SS:FF这样的形式。
1
你的时间码模式是什么？你是否关注掉帧问题？ - znap026
7个回答
4
它可以以更简单的方式完成：
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将显示为00:00:34:00

showTwoDigits
这个帮助函数需要一个数字（例如：6），在它前面加上“00”，使它成为字符串（例如：“006”）。然后从末尾向前切片两个位置（将得到“06”）。

displayTime
var h
它通过将帧数除以60*60*30个每小时的帧数来计算小时。一个小时有60*60*30个帧。
var m
分钟的计算方式相同，通过将其除以每分钟60*30个帧来计算。但请注意，这可能会导致像80分钟这样的数字，因为它是总分钟数。脚本必须考虑在将此金额除以60后的余数。这里用到了模数。80％60将给出20，我们要找的数字。
var s
以类似的方式通过将帧除以每秒30帧来计算秒数，然后取模60（以便将65秒表示为5）。

4

您是否在寻找一个内置的JS函数？..

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;

这就是您需要的。

1
谢谢亚历山大。你能详细说明一下吗？我不确定我明白了。 - waxical
% 是一个模除运算符，因此我们在每一步中提取整数部分和余数。 - Alexander Pavlov
由于使用 % 运算符比 Math.floor() 更好。 - Leo
1

你也可以使用日期对象，参见这里。只需创建类似以下的内容：

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

然后您可以使用对象的所有字符串函数，或者使用它自己创建自己的函数。

要明确的是，我需要将字符串格式化为：HH:MM:SS:FF。 - waxical
1

试试这个：

    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
非常好 - 我注意到这里有一个奇怪的地方，当你有一个当前帧为169时，它显示为00:00:06:-11，带有一个负号？有什么想法吗？ - waxical
这太完美了，对我以及其他人都非常有帮助。但愿我能给更多赞。 :) - waxical
1
如果你想知道错误来自于使用 Math.round 而不是 Math.floor。 - Lucas Green
1
例如，1小时的时间将变成[1，60，3600，FF]。其中SS，MM和HH实际上代表总秒数，分钟数和小时数。 - Alex Gonçalves
0

虽然这是一篇旧帖子，但我最近正在使用它，结合Alexander和Lucas的代码可以得到正确的结果。实际上，检查版本在处理非常大的帧数时会出现问题（我认为是由于Math.floor引起的）。

代码如下：

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
0

对于任何对showTwoDigits函数的Swift版本感兴趣的人，这里是一个可用的代码示例：

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
    }
0

这个函数可以正确地转换为HH:MM:SS:FF：

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(':');
}

演示

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

请参见这个Fiddle。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接