1

我实际上正在构建的是一个基于 webkit 的控制器，它与一个名为 Ecoute.app 的程序进行通信。

控制器有一个进度条，指示当前播放歌曲的进度，但我想通过单击调整该条的位置。

function barClick() { 
    var progress = Ecoute.playerPosition(); 
    var width = 142.5;

    var percentElapsed = progress / length;
    var position = width * percentElapsed;

    Ecoute.setPlayerPosition(position);  
}

是我所拥有的，Ecoute.playerPosition()返回玩家的当前位置。

宽度以前被定义为动态值

 var width = 142.5 / length * progress + 1.63;

长度是当前轨道长度，进度是玩家的位置。这已经能够通过桌面控制器动态拉伸进度叠加图像以指示轨道的位置。

但是，第二个函数中使用的最大宽度似乎不允许第一个函数正常工作。

任何可能确定正确值或方法的帮助将不胜感激。

4

2 回答 2

2

很难真正知道你在哪里卡住了。我的猜测是你在点击工作和确定在哪里设置进度时遇到问题。

我的解决方案是有 2 个元素，一个包裹另一个。外部元素接受点击事件，大小由内部元素反映。您必须自己完成与 Ecoute 播放器集成的工作，但我展示了如何计算百分比。 

var outside = document.getElementById('outside');
var inside = document.getElementById('inside');

outside.addEventListener('click', function(e) {
  inside.style.width = e.offsetX + "px";

  // calculate the %
  var pct = Math.floor((e.offsetX / outside.offsetWidth) * 100);
  inside.innerHTML = pct + " %";
}, false);

我没有为任何跨浏览器工作而烦恼，因为这是基于 webkit 的应用程序。

演示：http: //jsbin.com/ubana3/5

于 2010-12-31T20:47:30.887 回答
0

在您的 HTML 中，

0% 已播放</progress>

在 jQuery 中，

mediaPlayer = document.getElementById(playerId);
progressBar = document.getElementById('progress-bar');

progressBar.addEventListener('click', function(e) {
     var percentage = Math.floor((e.offsetX / this.offsetWidth) * 100);
     mediaPlayer.currentTime  = mediaPlayer.duration*(percentage/100);
     progressBar.value        = percentage;
     progressBar.innerHTML    = percentage + '% played';          
});
于 2015-05-14T06:46:42.267 回答