Question

Working on a scrub bar for a chromeless player through youtube. I have the functionality working pretty much as Id like BUT when I click to drag the blue “seeker” button and drag it, it jumps back to its original position until I release the mouse click. Once I release, it starts the video at the appropriate position and draws the progress bar at the appropriate position too. code is here: http://jsfiddle.net/VysBU/1/

I also logged the position of the mouse and width of the progress bar (which is the part that jumps around) and the width values move consistently upward or downward on drag which doesn’t make sense because visually, it jumps back and forth. Odd.

Any help is appreciated…if you need me to clarify something, let me know.

NOTE: just remembered…it tends to jump on vertical mouse movements only. ie, if i move the mouse horizontally without changing its vertical position at all, it ‘animates’ fine. if the vertical position does move, the ‘animations’ are erratic.

Answer 1

Check this out http://jsfiddle.net/sz4FF/

you need to stop the interval of

setInterval(animateProgress, 100); 

when you begin seeking, and continue it when the seeking stops. The reason why it makes that jump is simply because animateProgress is called and sets the width of the playedBar and seeker.

I hastily added it to a global function (window.TEST_INTERVAL) just to check if it would work, and it does.

(how to initialize and clear the interval)

clearInterval(TEST_INTERVAL);
TEST_INTERVAL = setInterval(animateProgress, 100); 

within seeking

function seeking(e){
        clearInterval(TEST_INTERVAL);

within doneSeeking

function doneSeeking(e){
         TEST_INTERVAL = setInterval(animateBuffer, 250);

UPDATE: IE8 and below problem

    mousePos  = e==undefined ? event.clientX : e.pageX;
    //get the position of the mouse
    //mousePos = e.pageX;

the event returned by onmousemove is “undefined” in ie7 and 8, that way we are checking for window.event.clientX, which shows the mouse position relative to the window. It seems to work fine but I believe that in a normal environment some minor tweaks might be needed