Получить ширину части прогресс-бара нажатой и сделать расчет секунд

Я разрабатываю пользовательский плеер с 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 неверен (потому что он находится относительно ширины прогресс-бара, то есть имеет фиксированную ширину), и у меня нет идеи, как сделать этот расчет... Как это сделать?

1 3
javascript progress-bar youtube-iframe-api youtube-javascript-api

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);
});
6