Jquery UI slider - Seekbar for Tubeplayer plugin

Question

I am trying to adapt the Jquery ui slider for use with the Tubeplayer jquery plugin for a simple seek bar. I've gotten it to seek appropriately when you click on the bar somewhere, but I cannot get the slider to move by itself as the video plays. Here is a snippet of my working code:

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

                                    });                         
},

I know that this code will not address the slide handle moving with the video, only seeking to the correct time in the video when clicked. Any easy solutions for slider movement? I've written a manual while loop but it seems to be hanging things up:

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

I've also seen an example here: http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/ but can't seem to figure out how they are achieving the css "width" and "left" properties changing with the currentTime in the seekbar. I'm having a real tough time getting this to work with my plugin. Any help is MUCH appreciated!! Thanks!!

Answer 1

Took me way too long to figure this out. Came down to a lack of knowledge of javascript. I just needed the setInterval() method. Here is my working code:

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

And my updated slider init call:

$.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);
                            },

                    }); 

},

and on Pause, just for good measure:

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

And this all works beautifully to create a fully functioning custom jquery ui slider seekbar using the Tubeplayer plugin w/ HTML5 support! Amazing custom Youtube chromeless player solution w/ mobile support. Gotta love that!