javascript - Get width of part of progress bar clicked and do calculation of seconds - Stack Overflow

admin管理员组

文章数量:1426907

I've been developing a custom player with Youtube JavaScript API V3. And this is part of my code:

In index.html I've:

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

And, in my JS this is the function to do the progress bar animation:

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

And I want to when progress bar is clicked, get the seconds by local of progress bar clicked, so, i try:

$("#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);
});

But the output of time is wrong (because he is relative to the progress bar width, that have fixed width), and I no have ideia of how to do this calculation... How to do it?

I've been developing a custom player with Youtube JavaScript API V3. And this is part of my code:

In index.html I've:

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

And, in my JS this is the function to do the progress bar animation:

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

And I want to when progress bar is clicked, get the seconds by local of progress bar clicked, so, i try:

$("#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);
});

But the output of time is wrong (because he is relative to the progress bar width, that have fixed width), and I no have ideia of how to do this calculation... How to do it?

• javascript
• progress-bar
• youtube-javascript-api
• youtube-iframe-api

Share Improve this question Follow edited Sep 13, 2015 at 23:26 Igor asked Sep 12, 2015 at 14:58 IgorIgor 67355 gold badges1616 silver badges3838 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6 +50

Total bar width is the 100%, and the width clicked is a percentage of that. To get the proportionate requested time do 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);
});

本文标签： javascriptGet width of part of progress bar clicked and do calculation of secondsStack Overflow