JQuery的UI滑塊 - Seekbar的Tubeplayer插件

Question

我想適應Jquery的UI滑塊使用Tubeplayer的jquery插件一個簡單的搜索欄。當你點擊某個地方的酒吧時，我已經找到了它，但是當視頻播放時我無法讓滑塊自動移動。這裏是我工作的代碼片段：

$.tubeplayer.defaults = { 

      afterReady: function($player){$("#slider").slider({ 
           value:0, 
           orientation: "horizontal", 
           range: "min", 
           max: $("#youtube-player-container").tubeplayer("data").duration, 
           step:1, 
           animate: true, 
           slide: function(event, ui) { 
             jQuery("#youtube-player-container").tubeplayer("seek",ui.value); 
            } 

            });       
}, 

我知道，這個代碼將不會解決滑動手柄與視頻移動，只有點擊後尋求在視頻的正確時間。任何簡單的滑塊運動解決方案？我已經寫while循環手冊，但它似乎是掛東西：

onPlayerPlaying: function(){ 
     var playing = 1; 
     while(playing == 1){  
     var cur = $("#youtube-player-container").tubeplayer("data").currentTime; 
     var dur = $("#youtube-player-container").tubeplayer("data").duration; 
     if(cur<dur){ 
      $("#slider").slider("option", "value", cur); 
}}}, 

我也看到了這個範例：http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/，但似乎無法弄清楚它們是如何實現的CSS「寬「和」左「屬性隨seekbar中的currentTime而變化。我有一個真正艱難的時間讓我的插件工作。任何幫助深表感謝！！謝謝！！

Answer 1

花了太多時間弄清楚了。歸結爲缺乏JavaScript的知識。我只需要setInterval（）方法。這是我的工作代碼：

onPlayerPlaying: function(){ 

     var seekUpdate=''; 
     seekUpdate=setInterval(function(){ 
     var cur = Math.floor($("#youtube-player-container").tubeplayer("data").currentTime); 
     var time = Math.floor(cur*254/dur); 
     $(".ui-slider-handle").css("left",time); 
     $(".ui-slider-range").css("width",time); 
     },100); 
     }, 

而且我的更新滑塊的init電話：

$.tubeplayer.defaults = { 

    afterReady: function($player){$("#slider").slider({ 
           range: "min", 
           max: 254, 
           step:1, 
           animate: true, 
           slide: function(event, ui) { 
             jQuery("#youtube-player-container").tubeplayer("seek",(ui.value/254)*dur); 
             clearInterval(seekUpdate); 
          }, 

        }); 

}, 

和暫停，只是爲了好措施：

onPlayerPaused: function(){ 
     var cur = Math.floor($("#youtube-player-container").tubeplayer("data").currentTime); 
     var time = Math.floor(cur*254/dur); 
     $("#slider").slider("option", "value", time); 
}, 

而這一切精美的作品創造一個全功能的自定義jquery UI滑塊seekbar使用Tubeplayer插件W/HTML5支持！令人驚歎的定製YouTube無鉻球員解決方案w /移動支持。得愛！