title: Youtube player API and jQuery slider
body: <p>I am using the YouTube API to get the current elapsed time of a video: <code>player.getCurrentTime();</code>  and the <code>player.getDuration();</code> functions; I have set a slider in jQuery that will have the max value set to <code>player.getDuration</code> and the min to 0;</p>
  
  <p>Using those two functions I have built the following piece of code: </p>
  
  <pre><code>    var progress = setInterval(function(){
         $("#progressbar").slider({value: Math.floor(player.getCurrentTime())}); 
      },1000);
  </code></pre>
  
  <p>that will update a slider with the elapsed time of the Youtube video. <br />
  The problem is that when I pause the video, the value of the slider flickers between an earlier value, and the current elapsed time (<code>player.getCurrentTime()</code>) value. </p>
  
  <p>Can someone explain?</p>
  
  <p><strong>EDIT:</strong> here is the proper code that updates the slider on player play state and stops the update function on player pause state:</p>
  
  <pre><code>    function playerStateChange(newState) {
       globalYtState = newState;
       if(newState == 0){
     $("#hSongSearcher").val('').trigger('keyup');
     setTimeout(playNextVideo(),1500);
       }
       if(newState == 2){
       clearInterval(progressUpdater);
       }
       if(newState == 1){
      progressUpdater = setInterval(function(){
       //console.log(Math.floor(player.getCurrentTime()));
      if(Math.floor($("#progressbar").slider('value')) != Math.floor(player.getCurrentTime())){
          $("#progressbar").slider({value: Math.floor(player.getCurrentTime())});
      }
                       $('.current_elapsed').html(getPropperDuration(Math.floor(player.getCurrentTime())));
              },1000);
        }
      }
  </code></pre>