【问题标题】:How to get Player duration, current Time, and video frames or Seek Position (JQuery)如何获取播放器持续时间、当前时间和视频帧或搜索位置(JQuery)
【发布时间】:2013-10-16 18:43:01
【问题描述】:

我可以把这段代码放在一起来获取玩家的持续时间、当前时间,并导出一个值,用于更新进度条宽度。

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 分钟的时间。

【问题讨论】:

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


    【解决方案1】:

    只需更改此行

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

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

    用这一行替换它

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

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

    【讨论】:

      猜你喜欢
      • 2019-07-24
      • 2022-11-23
      • 1970-01-01
      • 1970-01-01
      • 2017-01-19
      • 2019-09-27
      • 1970-01-01
      • 1970-01-01
      • 2017-07-14
      相关资源
      最近更新 更多