var timer = setInterval(function () {
var secs = ytplayer.getCurrentTime();
var minutes = Math.floor(secs / 60);
var seconds = Math.floor(secs % 60);
var tsecs = ytplayer.getDuration();
var tminutes = Math.floor(tsecs / 60);
var tseconds = Math.floor(tsecs % 60);
var time = minutes + ":" + seconds + " / " + tminutes + ":" + tseconds;
document.getElementById('currenttime').innerHTML = time;
}, 1000);
This code does not work in firefox but it does in chrome and IE.
I checked with firebug and it says that the variables secs, minutes, seconds, tsecs, tminutes, tseconds and time are not defined.
I dont know how to fix this because I did use var to define them. Does anyone know what I have done wrong?
Thanks
It sounds like you have an element with the id ytplayer and are assuming that window.ytplayer will be created automatically.
Don't make that assumption. Use document.getElementById (and make sure you have a Doctype that triggers Standards mode).
try this
var timer = setInterval(function(){
var secs = ytplayer.getCurrentTime(),
minutes = Math.floor(secs / 60),
seconds = Math.floor(secs % 60),
tsecs = ytplayer.getDuration(),
tminutes = Math.floor(tsecs / 60),
tseconds = Math.floor(tsecs % 60),
time = minutes + ":" + seconds + " / " + tminutes + ":" + tseconds;
document.getElementById('currenttime').innerHTML = time;
},1000);
and make sure ytplayer is already there.
Related
I'm using html5 audio tag in my project. everything works fine.
I need to use the timeupdate and get the value of the minutes that has passed in this format: 00:00
Currently I can only get that value as 0:00 with my code:
This is my code:
$(audio).bind('timeupdate', function(){
var percent = audio.currentTime/ audio.duration * 100;
/////Passed time////
var mins = Math.floor(audio.currentTime / 60);
var secs = Math.floor(audio.currentTime % 60);
if (secs < 10) {
secs = '0' + String(secs);
}
$('.Audio_passedTime').text(mins + ':' + secs);
});
And a working fiddle: http://jsfiddle.net/8cpwv2mf/
Could someone please advice on this issue?
Thanks in advance.
You could use the same structure you used for the mins, like so:
$(audio).bind('timeupdate', function() {
var percent = audio.currentTime/ audio.duration * 100;
/////Passed time////
var mins = Math.floor(audio.currentTime / 60);
if (mins < 10) {
mins = '0' + String(mins);
}
var secs = Math.floor(audio.currentTime % 60);
if (secs < 10) {
secs = '0' + String(secs);
}
$('.Audio_passedTime').text(mins + ':' + secs);
You can define a function that pads numbers with 0's (like this)
function zpad(n) {
return ("0" + n).slice(-2);
}
and then use it to format both minutes and seconds
$('.Audio_passedTime').text(zpad(mins) + ':' + zpad(secs));
How to parse a given amount of milliseconds (e.g. 125230.41294642858) into a time format like: minutes:seconds?
var ms = 125230.41294642858,
min = 0|(ms/1000/60),
sec = 0|(ms/1000) % 60;
alert(min + ':' + sec);
Try the following
var num = Number(theTextValue);
var seconds = Math.floor(num / 1000);
var minutes = Math.floor(seconds / 60);
var seconds = seconds - (minutes * 60);
var format = minutes + ':' + seconds
Number.prototype.toTime = function(){
var self = this/1000;
var min = (self) << 0;
var sec = (self*60) % 60;
if (sec == 0) sec = '00';
return min + ':' + sec
};
var ms = (new Number('250')).toTime();
console.log(ms);
=> '0:15'
var ms = (new Number('10500')).toTime();
console.log(ms);
=> '10:30'
Even though moment.js does not provide such functionality, if you come here and you are already using moment.js, try this:
function getFormattedMs(ms) {
var duration = moment.duration(ms);
return moment.utc(duration.asMilliseconds()).format("mm:ss");
}
This workaround in moment was introduced in this Issue.
My javascriptcode is working fine when i put alert.I need to Display time in Counter Format(Second decreasing way). Please help me in resolving this issue
<script type="text/javascript">
window.onload = function () {
//alert("request>>>");
var count = 0;
var start_actual_time = document.getElementById("timerStartTime").value;
var end_actual_time = document.getElementById("timerEndTime").value;
start_actual_time = new Date(start_actual_time);
var start_actual_time1 = new Date(start_actual_time.getTime());
start_actual_time1 = new Date(start_actual_time1);
var end_actual_time1 = new Date(end_actual_time);
var hours =end_actual_time1.getHours()- start_actual_time1.getHours();
var minutes = end_actual_time1.getMinutes() - start_actual_time1.getMinutes();
var seconds = end_actual_time1.getSeconds()- start_actual_time1.getSeconds();
seconds = hours * 3600 + minutes * 60 + seconds;
//alert ("seconds >>." +seconds);
timer(seconds);
};
function timer(seconds) {
alert("calling timer");
var s1 = Number(seconds);
var hours = Math.floor(s1 / 3600);
var minutes = Math.floor(s1 % 3600 / 60);
var s = Math.floor(s1 % 3600 % 60);
//alert("sec1" + s);
display = document.querySelector('#time');
var formatted = ((hours < 10)?("0" + hours):hours) + ":" + ((minutes < 10)?("0" + minutes):minutes) + ":" + ((s < 10)?("0" + s):s)
display.textContent = formatted ;
seconds = seconds - 1;
timer(seconds);
}
</script>
The way your code is written creates a
too much recursion
exception for me.
Therefore I have avoided recursive invokes and used javascript setInterval:
var refreshIntervalId = setInterval(function(){ timer(); }, 1000);
When your seconds reach zero, timer is stopped:
if (seconds == -1){
clearInterval(refreshIntervalId);
Link to working fiddle: http://jsfiddle.net/3ggspruf/2/
I have the following code, which is supposed to do what I need:
function fromSeconds(seconds, showHours = false) {
if(showHours) {
var hours = Math.floor(seconds / 3600),
seconds = seconds - hours * 3600;
}
var minutes = (Math.floor(seconds/60) < 10) ?
"0" + Math.floor(seconds/60) : Math.floor(seconds/60);
var seconds = (seconds % 60 > 9) ? seconds % 60 : "0" + seconds % 60;
if(showHours) {
var timestring = hours + ":" + minutes + ":" + seconds;
} else {
var timestring = minutes + ":" + seconds;
}
return timestring;
}
The problems is that I also have this:
var video = $('#home_explainer_placeholder');
video.bind("timeupdate", function() {
$('#currentTime').html(video[0].currentTime.toFixed(2));
$('#remTime').html((video[0].duration - video[0].currentTime).toFixed(2));
$('#totalTime').html(video[0].duration.toFixed(2));
});
And I don't know how to apply the first code so that for example currentTime is displayed like this: minutes:seconds.
Any help please?
With a small fixation you can leave this as that:
Demo
function fromSeconds(seconds, showHours) {
if(showHours) {
var hours = Math.floor(seconds / 3600),
seconds = seconds - hours * 3600;
}
var minutes = ("0" + Math.floor(seconds/60)).slice(-2);
var seconds = ("0" + parseInt(seconds%60,10)).slice(-2);
if(showHours) {
var timestring = hours + ":" + minutes + ":" + seconds;
} else {
var timestring = minutes + ":" + seconds;
}
return timestring;
}
var video = $('#home_explainer_placeholder');
video.bind("timeupdate", function () {
$('#currentTime').html(fromSeconds(video[0].currentTime));
$('#remTime').html(fromSeconds(video[0].duration - video[0].currentTime));
$('#totalTime').html(fromSeconds(video[0].duration));
});
You can just pass the values like video[0].currentTime to the function fromSeconds which will return the formatted string
var video = $('#home_explainer_placeholder');
video.bind("timeupdate", function () {
$('#currentTime').html(fromSeconds(video[0].currentTime));
$('#remTime').html(fromSeconds(video[0].duration - video[0].currentTime));
$('#totalTime').html(fromSeconds(video[0].duration));
});
Assuming currentTime is the time in seconds, you need to pass the value into your function.
fromSeconds returns the text your require, so fromSeconds(mytimevalue) will return mm:ss as required:
video.bind("timeupdate", function() {
$('#currentTime').html( fromSeconds(video[0].currentTime) );
$('#remTime').html( fromSeconds(video[0].duration - video[0].currentTime) );
$('#totalTime').html( fromSeconds(video[0].duration) );
});
Another option would be to use JavaScript's Date() Object, which takes milliseconds as a value:
var currentTime = new Date(video[0].currentTime * 1000);
You can then use Date.getMinutes() and Date.getSeconds() to find your values.
More details here
$('#currentTime').html(function(){
var time=video[0].currentTime.toFixed(2);
//some conversion needed in-order to convert to required format
fromSeconds(time,false)//returns time
});
I have been trying for hours to make a javascript function that will take an input time in seconds and provide a countdown. For some reason it just refuses to count down after the first second and I can't figure out why not.
Here is my HTML:
<span style="display:none;" id="unixtime_coming_0">600</span><span onload='timer()' id="timer_coming_0"></span>
And here is my javascript:
setInterval(function timer() {
var count = document.getElementById("unixtime_coming_0").innerHTML;
count = count - 1;
if (count <= 0) {
clearInterval(counter);
return;
}
var days = Math.floor(count / 86400);
var hours = Math.floor(count / 3600) % 24;
var minutes = Math.floor(count / 60) % 60;
var seconds = count % 60;
document.getElementById("timer_coming_0").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s"; // watch for spelling
}, 1000);
Defining a named function doesn't return anything. You have to define it outside of setInterval:
var counter = setInterval(timer, 1000);
function timer() {
var unixtime = document.getElementById("unixtime_coming_0");
var count = parseInt(unixtime.innerHTML, 10);
unixtime.innerHTML = count - 1;
if (count < 1) {
clearInterval(counter);
return;
}
var days = Math.floor(count / 86400);
var hours = Math.floor(count / 3600) % 24;
var minutes = Math.floor(count / 60) % 60;
var seconds = count % 60;
document.getElementById("timer_coming_0").innerHTML= days + "d " + hours + "h " + minutes + "m " + seconds + "s"; // watch for spelling
}
I'd get rid of the setInterval completely. Just call timer via setTimeout inside of timer itself.
count is being reset to 600 on every loop. Just move its declaration outside of the function, like so:
var count = parseInt(document.getElementById("unixtime_coming_0").innerHTML, 10);
setInterval(function timer() {
count = count - 1;
[...]
For accurate count down you need to use new Date().getTime(). Please have a look at this answer for a similar question https://stackoverflow.com/a/15635372/1523245