How to turn a decimaled number into a framerate designation in javascript - javascript

I am using the flowplayer video player and a flowplayer function is giving me a decimal for the point on the player timeline. i.e. Instead of giving me a traditional:
00:00:01:03
timestamp, it just gives me
1.03333
or the equivalent. The
.033333
essentially serves as the frames although I believe it is, in that case based on a 10 fps framerate (which is fine for what I am doing.)
I am not skilled at all in working with numbers/decimals in JS. How can I convert that
1.033333
into a timestamp like
00:00:01:03?

Use division and modulus: x % 60 will give you the remainder of dividing by 60 (363 % 60 is 3), then floor divide (Math.floor(363 / 60) is 6) and use modulus again, repeat.
So:
var timestamp = 1.03333;
var seconds = timestamp % 60;
timestamp = Math.floor(timestamp / 60);
var minutes = timestamp % 60;
timestamp = Math.floor(timestamp / 60);
var hours = timestamp;

Related

How can I understand what this javascript timer means in detail?

I created a countdown / timer a few weeks ago using Javascript. The code is also executed correctly by the browser.
Today I looked at the code again and I make notes (Javascript comments) to understand the code and what exactly it does and to better understand Javascrpit.
I'm stuck at the moment. Here's a small piece of code that I absolutely don't understand.
What does the modulo operator do with time? Seconds, minutes, hours...
What exactly does y do?
and why are tenary operators used?
I would be very grateful if someone could explain to me in their own words what exactly the code does. thanks
function timer() {
let seconds = count % 60;
let minutes = Math.floor(count / 60);
let hours = Math.floor(minutes / 60);
minutes %= 60;
hours %= 60;
y = ((minutes>0) ? ((minutes>9) ? minutes : '0'+minutes) + ":" : "")
y += (seconds>9 || minutes == 0) ? seconds : '0'+seconds;
Same Code with my Comments :)
function timer() {
// SET VARIABLE FOR SECONDS = DONT KKNOW WHAT count % 60 means ???
let seconds = count % 60;
// SET VARIABLE FOR MINUTES = DONT KKNOW WHAT Math.floor(count / 60) means ???
let minutes = Math.floor(count / 60);
// SET VARIABLE FOR MINUTES = DONT KKNOW WHAT Math.floor(minutes / 60) ???
let hours = Math.floor(minutes / 60);
// WHY USING %= OPERATER ???
minutes %= 60;
hours %= 60;
// DONT UNDERSTAND Y ??? WHY USING TENARY OPERATORS ???
y = ((minutes>0) ? ((minutes>9) ? minutes : '0'+minutes) + ":" : "")
y += (seconds>9 || minutes == 0) ? seconds : '0'+seconds;
EDIT: count = 3600 SECONDS
You don't explain what count is, but it would appear to be a duration in seconds.
The modulo operator and the floor(a/b) operations are being used to convert the duration in seconds into a base-60 (i. e. Sumerian) representation, i. e., in hours, minutes, and seconds.
y is being built up to show the hours, minutes, and seconds as two decimal digits each, separated with colons, as is conventional to represent a time duration in hours, minutes, and seconds. So, for example, the final value might be "6:01:02" for six hours, one minute, and two seconds. For each base-sixty "digit", we want two decimal digits. The normal conversion of numbers to decimal notation does not include any leading zeros. If the answer were to have only one decimal digit, we have to append one leading zero to the beginning. So, for example, for 8, we would like to see "08".

Converting hours,minutes into seconds by parsing youtube t= queryparam in javascript/JQuery

I want to parse the timestamp t= in youtube url("http://youtu.be/O4tzHn-EuHc?t=1h5m16s") and calculate the total number of seconds that i need to pass as a start parameter for embed youtube url "http://www.youtube.com/embed/XGSy3_Czz8k?start="
To get the hours, minutes and seconds i use reg-exp's as below. Let me know any improvement can be done in code to make it simple.
var url ="http://youtu.be/XGSy3_Czz8k?t=1h5m16s";
var timeStamp = url.match("t=(.)*?[&|(\s)]");
var hours = timeStamp[0].match(/(\d)+h/);
var minutes = timeStamp[0].match(/(\d)+m/);
var seconds = timeStamp[0].match(/(\d)+s/);
var totalTimeInSeconds = 0;
if (hours) {
hours = hours[0].replace("h","");
totalTimeInSeconds += hours * 60 * 60;
}
if (minutes) {
minutes = minutes[0].replace("m","");
totalTimeInSeconds += minutes * 60;
}
if (seconds) {
seconds = seconds[0].replace("s","")
totalTimeInSeconds += seconds * 1;
}
console.log("hours:"+hours);
console.log("minutes:"+minutes);
console.log("seconds:"+seconds);
console.log("TotalTimeInSeconds:"+ totalTimeInSeconds);
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k?start="+totalTimeInSeconds>
</iframe>
I think a good source for getting comments on your code would be codereview.
You can get rid of your String.replace calls by slightly adjusting your regexes to read like this:
var hours = timeStamp[0].match(/(\d+)h/);
var minutes = timeStamp[0].match(/(\d+)m/);
var seconds = timeStamp[0].match(/(\d+)s/);
With these regexes you will capture all digits at once, and can than use them like this:
if (hours) {
totalTimeInSeconds += parseInt(hours[1], 10) * 60 * 60;
}
if (minutes) {
totalTimeInSeconds += minutes[1] * 60;
}
if (seconds) {
totalTimeInSeconds += seconds[1];
}
The use of parseInt is not necessary there,
but I'd probably introduce it to make it more explicit that conversion is taking place. I'd also suggest adjusting the regex for your timeStamp variable so that it already narrows down on the t parameter more.
I think the easiest is to use RegExp replace function:
var seconds = "1h5m16s".replace(/([0-9]+)h([0-9]+)m([0-9]+)s/, function(match, p1, p2 ,p3) {
return p1 * 60 * 60 + p2 * 60 + p3 * 1
})
Note p3 * 1 - it is a shortcut for parseInt. Also note that replace will return you a string - don't forget to convert to a number if needed.
Try this
var url ="http://youtu.be/XGSy3_Czz8k?t=1h5m16s";
var timeStamp = url.match("t=(.)*?[&|(\s)]");
timeStampSplitted = timeStamp[0].replace("t=","").replace("h", ":").replace("m", ":").replace("s", "").split(':');
// minutes are worth 60 seconds. Hours are worth 60 minutes.
var seconds = (+timeStampSplitted[0]) * 60 * 60 + (+timeStampSplitted[1]) * 60 + (+timeStampSplitted[2]);

How to multiply time using javascript?

I have the following timespan coming from a model in MVC:
timeTaken = "00:01:00";
Then I have a multiplier
multiply = "3";
Result: 00:03:00
What would be the best way to calculate this time?
I don't know a great deal of libraries. I was thinking of splitting the seconds, minutes and hours, dividing each one into seconds, multiplying then putting it back together.
However, I have this kind of calculations for many sections, it just seems a little mundane. Can I just multiply the time in a better manner?
Thanks
I am combining the snippets I found in multiple pages. Conversion of hh:mm:ss to seconds, multiply 3x and then again convert to hh:mm:ss.
var hms = '00:01:00'; // your input string
var a = hms.split(':'); // split it at the colons
// minutes are worth 60 seconds. Hours are worth 60 minutes.
var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
var newSeconds= 3*seconds;
// multiply by 1000 because Date() requires miliseconds
var date = new Date(newSeconds * 1000);
var hh = date.getUTCHours();
var mm = date.getUTCMinutes();
var ss = date.getSeconds();
// If you were building a timestamp instead of a duration, you would uncomment the following line to get 12-hour (not 24) time
// if (hh > 12) {hh = hh % 12;}
// These lines ensure you have two-digits
if (hh < 10) {hh = "0"+hh;}
if (mm < 10) {mm = "0"+mm;}
if (ss < 10) {ss = "0"+ss;}
// This formats your string to HH:MM:SS
var t = hh+":"+mm+":"+ss;
document.write(t);
JSFiddle
First you can convert them to seconds as below
var hms = "00:01:00";
var a = hms.split(':'); // split it at the colons
// minutes are worth 60 seconds. Hours are worth 60 minutes.
var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
var newSeconds=seconds * 3;
var t = new Date();
t.setSeconds(newSeconds);
console.log(t);
DEMO
Update
To just obtain time do as below
var time=t.toTimeString().split(' ')[0]
DEMO
UPDATE
To obtain just hour from time you can do as follows
t.toTimeString().split(' ')[0].split(':')[0]
and to obtain hour in 12 hour format you can do as below:
var hour;
if(t.toTimeString().split(' ')[0].split(':')[0]>12)
hour=t.toTimeString().split(' ')[0].split(':')[0]-12;
else
hour=t.toTimeString().split(' ')[0].split(':')[0];
alert(hour);
UPDATED DEMO

Setting a countdown timer and having problems with IE

I've set up a countdown timer with 1 sec interval and increment / decrement in mill secs..
I then searched for something that would give me the value in minutes/seconds. I came up with the following:
var timer = 130000;
var mins = Math.floor((timer % 36e5) / 6e4),
secs = Math.floor((timer % 6e4) / 1000);
The above code works on Safari, Chrome and Firefox with no problem. When I get to Internet Explorer, it doesn't work at all.
Is there another way of doing it that would work on all browsers?
Try with removing the exponetial.
var timer = 130000;
var mins = Math.floor((timer % 3600000) / 60000),
secs = Math.floor((timer % 60000) / 1000);
Read more about Exponential Notation.
An Exponential Notation if number with format a x 10^n, where 1<= a < 10 and n is integer with positive or negative value.
For example:
36e5
= 36 x 10^5
= 36 x 100000
= 3600000
ans so on.

create countdown timer in milliseconds

I'm trying to create a timer that counts down in years, months, days, hours, minutes, seconds and milliseconds. I've found a few guides online, but they are sort of not easy to understand, or do not do the milliseconds. Can anyone help me do something like this, say, for this friday at 13:30.
so it could read 0y 0m 2d 2h 11m 50ms
and counts down the milliseconds. I would show code to demonstrate that I have actually tried to do this myself, but it all failed so dismally that i'd be embarrassed to.
I also read this article, which makes me mistrust javascript timers a bit. Is this true, that they become so out of sync?
Thanks for any help!
Depends how you implement it.
If you read the time once and depend on the setInterval or/and setTimeout for the accuracy then yes .. they can get out of sync.
If you always get the current time for using in your calculations, then it can go out of sync like the rest of your system goes out of sync... meaning that it follows the clock of the computer.
Altering my answer at JavaScript / jQuery Countdown to add milliseconds you get
var end = new Date('13 Apr 2012 13:30:00');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24;
var timer;
function showRemaining()
{
var now = new Date();
var distance = end - now;
if (distance < 0 ) {
// handle expiry here..
clearInterval( timer ); // stop the timer from continuing ..
//alert('Expired'); // alert a message that the timer has expired..
}
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
var milliseconds = distance % _second;
var countdownElement = document.getElementById('timer');
countdownElement.innerHTML = days + 'd ' +
hours + 'h ' +
minutes + 'm ' +
seconds + 's ' +
milliseconds + 'ms';
}
timer = setInterval(showRemaining, 10);
But it does not handle month and year as that needs more complex calculations to factor 28-31 day months and leap years..
Demo at http://jsfiddle.net/TaHtz/2/
Try this js fiddle: http://jsfiddle.net/QH6X8/185/
Set the end date with the end variable defined on the first line of the JavaScript.
If you don't want to update every 1 millisecond, then here is a jsfiddle updating every 60: http://jsfiddle.net/QH6X8/187/

Categories

Resources