Получите ширину части индикатора выполнения и нажмите подсчет секунд

Question

Я разрабатывал пользовательский плеер с API-интерфейсом JavaScript Youtube. И это часть моего кода:

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