我实际构建的是一个基于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;
长度是当前曲目长度,进度是玩家的位置。这已经能够动态拉伸进度叠加图像,以通过桌面控制器指示轨道的位置。
但是,第二个函数中使用的最大宽度似乎不允许第一个函数正常工作。
非常感谢任何可能确定正确价值或方法的帮助。
答案 0 :(得分:1)
很难真正知道你被困在哪里。我的猜测是你在点击工作并确定在哪里设置进度时遇到问题。
我的解决方案是拥有2个元素,一个包裹另一个元素。外部元素采用click事件,大小由内部元素反射。你必须自己完成与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的应用程序。
答案 1 :(得分:0)
在您的HTML中,
0%播放< /进展>
在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';
});