javascript - 获取点击进度条部分的宽度并计算秒数

Question

我一直在使用 Youtube JavaScript API V3 开发自定义播放器。这是我的代码的一部分:

在 index.html 我有:

<div class="player_music-progressBar" id="player_music-progressBar"><div></div></div>

styles.css:

.player_music-progressBar {
    position: relative;
    float: left;
    width: 100%;
    height: 6px;
    background-color: #444444;
    margin-top: 1px;
    cursor: pointer;
}

.player_music-progressBar div {
    height: 100%;
    width: 0px;
    background-color: #ccc;
}

并且，在我的 JS 中，这是执行进度条动画的函数:

function convert_time(seconds) {
    var s = seconds,
    h = Math.floor(s/3600);
    s -= h*3600;
    var m = Math.floor(s/60);
    s -= m*60;

    if(seconds >= "3600") {
        return "0" + h + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
    } else {
        return (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
    }
}

function progressBar(percent, element) {
    var progressBar_width = percent * element.width() / 100;

    element.find("div").animate({width: progressBar_width });
}

function onPlayerStateChange(event) {
    if(event.data == YT.PlayerState.PLAYING) {
        var playerTotalTime = player.getDuration();

        playing = setInterval(function() {
            var playerCurrentTime = player.getCurrentTime(),
            playerDifferenceTime = (playerCurrentTime / playerTotalTime) * 100;

            progressBar(playerDifferenceTime, $("#player_music-progressBar"));
        }, 1000);
    } else if(event.data == YT.PlayerState.PAUSED) {
        clearInterval(playing);
    }
}

我想当点击进度条时，通过点击进度条的本地秒数，所以，我尝试:

$("#player_music-progressBar").click(function(e) {
    //player.seekTo(e.pageX - $("#player_music-progressBar").offset().left);

    // to get part of width of progress bar clicked
    var widthclicked = e.pageX - $(this).offset().left;

    // do calculation of the seconds clicked
    var calc = (widthclicked / player.getDuration()) * 100;
    var calc_fix = calc.toFixed(0);
    var time = convert_time(calc_fix);

    console.log(time + " - " + widthclicked);
});

但是 time 的输出是错误的(因为他是相对于进度条的宽度，有固定的宽度)，我不知道如何做这个计算......如何做吗？

Answer 1

总条宽是 100%，点击的宽度是它的百分比。要获得按比例请求的时间，请执行 clickedWidth/totalWidth * player.getDuration():

$("#player_music-progressBar").click(function(e) {
    var $this = $(this);

    // to get part of width of progress bar clicked
    var widthclicked = e.pageX - $this.offset().left;
    var totalWidth = $this.width(); // can also be cached somewhere in the app if it doesn't change

    // do calculation of the seconds clicked
    var calc = (widthclicked / totalWidth * player.getDuration()); // get the percent of bar clicked and multiply in by the duration
    var calc_fix = calc.toFixed(0);
    var time = convert_time(calc_fix);

    console.log(time + " - " + widthclicked);
});