如何获得播放器持续时间,当前时间和视频帧或搜索位置(JQuery)

时间:2013-10-16 18:43:01

标签: javascript jquery css html5-video html5-audio

我可以将此代码放在一起以获取播放器持续时间,当前时间,并获得用于更新进度条宽度的值。

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分钟时间搞清楚。

1 个答案:

答案 0 :(得分:1)

只需更改此行

即可
var ratio=Math.floor((progBar.width())/progressBar.width()),           
        xpos=Math.floor( tDuration* (ratio / 100));

============

用此行替换它

var xpos=Math.floor(tDuration*progBar.width()/dbar.width());

==============