滑动时获取jQuery UI Slider值?

时间:2015-07-25 08:08:18

标签: jquery html css jquery-ui youtube-api

我有一个演示版,您可以使用YouTube播放器API更改YouTube视频的时间和音量。我正在尝试做的是在滑动或“擦洗”滑块时更新UI滑块值。我已经实现了第一部分,它在使用这个简洁的代码片段滑动时生动地更新了值:

slide: function(event, ui) {
    $("#content").text("video_time: " + ui.value.toString().toHHMMSS());
}

不幸的是......我正在尝试做的事情,当我滑动时,时间会成功更新,但会在一秒钟后重置。这是因为我有一个现在的功能,它导致它不断更新并确保jQuery UI Slider值与YouTube视频的值匹配,让这个工作对我来说是一个挑战。

如果有任何可行的解决办法,请告诉我,谢谢!

DEMO: http://codepen.io/mistkaes/pen/MwONzK?editors=001

1 个答案:

答案 0 :(得分:1)

The

$("#content").text("video_time: " + player.getCurrentTime().toString().toHHMMSS());

line in your onReady event is overwriting the one in your slide event. Since you pause the video when you start to seek, I just check if the player is paused in onReady, and if it isn't, use the player's current time as the value.

In other words, change

setInterval(function() {
    $("#content").text("video_time: " + 
    player.getCurrentTime().toString().toHHMMSS());
}, 250);

to

setInterval(function() {
    if(player.getPlayerState()!=2)//video not paused, use player time as video_time
    //thus, when the player IS paused, use the value from the slider as the 
    //video time, which is what you wanted
    {
        $("#content").text("video_time: " + 
        player.getCurrentTime().toString().toHHMMSS());
    }
}, 250);

in your onReady event.