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?

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?

• javascript
• youtube-api

Share Improve this question Follow edited Jun 27, 2013 at 23:16 sazr asked Jun 27, 2013 at 23:08 sazrsazr 25.9k7070 gold badges213213 silver badges386386 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

It appears there is no event sent when the user "Fast Forwards" or Tracks. So I've e 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>

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

Hmm.. Nice thoughts and definately useful most of the time. However you will get a false response if the user, who is actually viewing, has to pause the app twice in case his girlfriend nags about the washing the dishes during the video he's viewing.

I've found that tracking no longer receives a PAUSE event, but rather a BUFFERING event is fired and then a PLAY event.

The order of events fired when playing a youtube video until the end (no pausing or tracking) is:

BUFFERING -> PLAY -> ENDED

If a user were to track at least once, the events fired would be something like:

BUFFERING -> PLAY [they track] -> BUFFERING -> PLAY -> ENDED

The obvious caveat here is the false positive when the video is actually buffering because of connection or processing issues. I've tested this with some throttling but couldn't actually get any false positives in my environment.