Distinguish between Fast Forward & Pause Event in Youtube Javascript API

Question

I am using the Youtube Javascript API to load and play a websites embeded videos.

When the user clicks play, pause, etc. there are integers that represent these states. For example:

YT.PlayerState.ENDED
YT.PlayerState.PLAYING
YT.PlayerState.PAUSED
YT.PlayerState.BUFFERING
YT.PlayerState.CUED

What state message is sent for Fast Forward?

Note when I say Fast Forward I mean draging the video timer which makes the video advance or go back to a point in the video.

Do you know how I can detect when someone is fast forwarding?

*EDIT:*
After some more inspection I've determined that when you drag the time bar, the message YT.PlayerState.PAUSED is sent. This is a major problem because when the user pauses a video I will shrink the video back to its original size. But because a fast forward sends the same message as a pause, the video will shrink when someone fast forwards which isn't supposed to happen.

Any ideas how I can distinguish between a pause and a fast forward?

Answer 1

It appears there is no event sent when the user "Fast Forwards" or Tracks. So I've come up with my own method of detecting fast forward.

• If more than 1 PAUSE event is dispatched in a row: then the user is "Tracking" (Fast forwarding)
• If 1 and only 1 PAUSE event is dispatched: then the user has paused.

<script>
    var PAUSE_EVT_STACK = 0;

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PAUSED)
            PAUSE_EVT_STACK++;
        if (event.data == YT.PlayerState.PLAYING)
            PAUSE_EVT_STACK = 0;

        if (event.data == YT.PlayerState.PAUSED && PAUSE_EVT_STACK <= 1)
            console.log("Pause pressed");
        else if (event.data == YT.PlayerState.PAUSED && PAUSE_EVT_STACK > 1) {
            console.log("Tracking occuring");
            console.log("Hey! Dont fast forward during my ad you douche");
        }
    }

  function loadYouTubeVideo(uid) {
    setTimeout( function() {
        var instPlayer = new YT.Player(uid, {
            height: 480,
            width: 853,
            enablejsapi: 1,
            suggestedQuality: 'highres',
            videoId: uid,
            events: {
                    'onStateChange': onPlayerStateChange
            }
        });
    }, 500);
  }
</script>

Answer 2

I've found that trying to use Jake M's method didn't work for me. I don't know if it's because the API has changed, or not, but following the logic, and working with my console, the logic would always hit pause before it hits the fast-forward trigger.

And oddly enough, after awhile, when I would fast forward, it was hitting pause only once, instead of multiple times.

Since this is an asynchronous situation (waiting for player events) I've found that it is best to approach it from an external viewer method that takes time in to consideration, with 2 checks: the first to see if we've checked before, and the second to see if the player is currently playing.

If you do a check 0.8 seconds after the first check it gives the player enough time to figure out if it should be paused or playing, at which point the check runs again to see if it should either

var check = false;
var playing = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        slider.startStop(false);
        playing = true;
    } else if (event.data == YT.PlayerState.PAUSED) {
        playing = false;
        pauseCheck();
    } else if (event.data == YT.PlayerState.ENDED) {
        slider.goForward();
        slider.startStop(true);
    }
}

function pauseCheck() {
    // First time check is a "wait".
    if(!check) {
        check = true;
        setTimeout(pauseCheck, 800);
    // Second time check to determine true status.
    } else {
        // This means we fast-forwarded or rewound.
        if(playing) {
            // DO FF / RW THINGS.
        // This means we really did want to pause.
        } else {
            // DO PAUSE THINGS
        } 
        check = 0;
    }
}