我可以把这段代码放在一起来获取玩家的持续时间、当前时间,并得出一个我用来更新进度条宽度的值。
如
var slideOff=Math.floor((100 / tDuration) *( tCurrent));
progBar.css({width:slideOff+'%'});
我的问题是我也希望能够获得寻找位置。
例如,下面的代码工作正常,但搜索数字与当前时间不相符或相同。
如果您在JSFiddle上运行此代码,您将得到如下内容:
持续时间 29:05
当前时间 2:25
SeekPosition 1:44这是我希望搜索位置在计算时与当前时间相同的问题。
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/>
SeekPosition <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(dcurT) {
var tCurrent = dcurT ,//player.getCurrentTime(),
tDuration= 1745, //player.getDuration(),
dbar=$("#seekbar"),
progressBar=$("#seeker"),
progBar=$("#seekLay"),
currenT = tCurrent,
slideOff=Math.floor((100 / tDuration) *( tCurrent));
//Get current time
$('span#currenT').html(Math.floor(tDuration/ 60) + ":" + (tDuration % 60).toFixed().pad(2, "0"));
//get duration
$('span#durationT').html(Math.floor(tCurrent / 60) + ":" + (tCurrent % 60).toFixed().pad(2, "0"));
//Update bars
progressBar.css({marginLeft:slideOff+'%'});
progBar.css({width:slideOff+'%'});
//Get seek position
var ratio=Math.floor((progBar.width())/progressBar.width()),
xpos=Math.floor( tDuration* (ratio / 100));
$('span#resulk').html(Math.floor(xpos / 60) + ":" + (xpos % 60).toFixed().pad(2, "0"));
}
playerTime(145);//change
//Out Put
//Duration 29:05
//Current Time 2:25
//SeekPosition 1:44
我知道这不会花费你 5 分钟的时间来弄清楚。