I have successfully managed to put together this code that retrieves player duration, current time, and calculates a value used to update the progress bar width.
For Example
var slideOff = Math.floor((100 / totalTime) * currentTime);
progBar.css({width:slideOff+'%'});
However, I am facing an issue where I also need to obtain the seek position.
Although the following code works fine, the seek figure does not match the current time.
If you run this code on JSFiddle, you will notice discrepancies like:
Duration 29:05
Current Time 2:25
SeekPosition 1:44 The problem lies in seeking position not aligning with the current time when calculated.
Html
<div id="seekbar">
<div id="seeker"></div>
<div id="seekLay" ></div>
</div>
Duration<span id="currenT">00:00</span>
<br/>
Current Time<span id="durationT">00:00</span>
<br/>
Seek Position <span id="resulk">00:00</span>
Css
#seekbar{
border:none;
width:480px;
height:6px;
background-color:#00ffcc;
position:relative;
margin:auto;
}
#seekLay{
margin:0;
height:4px;
background-color:#001001;
position:relative;
top:1px;
}
#seeker{
width:6px;
height:100%;
position:absolute;
left:0;
background-color:red;
cursor:pointer;
}
span{margin-left:30px;}
Javascript
String.prototype.pad = function(l, s){
return (l -= this.length) > 0 ? (s = new Array(Math.ceil(l / s.length) + 1).join(s)).substr(0, s.length) + this + s.substr(0, l - s. length) : this;}
function playerTime(currentTime) {
var tCurrent = currentTime,
totalTime = 1745,
dbar=$("#seekbar"),
progressBar=$("#seeker"),
progBar=$("#seekLay"),
currenT = tCurrent,
slideOff=Math.floor((100 / totalTime) * tCurrent);
$('span#currenT').html(Math.floor(totalTime / 60) + ":" + (totalTime % 60).toFixed().pad(2, "0"));
$('span#durationT').html(Math.floor(tCurrent / 60) + ":" + (tCurrent % 60).toFixed().pad(2, "0"));
progressBar.css({marginLeft:slideOff+'%'});
progBar.css({width:slideOff+'%'});
var ratio=Math.floor((progBar.width())/progressBar.width()),
xpos=Math.floor(totalTime * (ratio / 100));
$('span#resulk').html(Math.floor(xpos / 60) + ":" + (xpos % 60).toFixed().pad(2, "0"));
}
playerTime(145);//change
//Output
//Duration 29:05
//Current Time 2:25
//Seek Position 1:44
This should not take too long for you to figure out.