Detect play/pause interaction on video element and ignore the events triggered through seek feature

Question

I'm having an issue with the video element events:

I only want to fire off an analytics event when the play or pause button is interacted with. The play, pause, and playing events work as expected up until the seek functionality is used.

I'd like to isolate the play/pause events from the ones fired through seek/seeking.

When the video is playing and it is clicked (moved to a different point), the play, playing, and pause events are triggered because the video will pause to buffer and start playing the video again. This order is not always the same. When paused you don't get any of these events.

When debugging the playing and pause events, I've seen the following order:

• Order 1: Pause, Seeking, Seeked, Playing
• Order 2: Pause, Playing, Seeking, Seeked, Playing

This link to w3.org/mediaevents gives you a good indication of the above.

I've set up my own version in jsfiddle (see console logs).

I've tried setting a flag that is reset on a timeout and setting/checking the last state for each event e.g. lastEvent = 'seeking'. None of these worked 100% because of the inconsistent fire order. If you drag the seek bar it won't fire the play, playing, or paused events which adds another scenario.

Answer 1

I'm still looking for a real good answer too. So far I have this workaround:

    function paused() {
        stateSeeked = false;
        stateEnded = false;
        setTimeout(function () {
            if (!stateSeeked && !stateEnded) {
                active = false;
            }
        }, 200);
    }

    function seek(event) {
        stateSeeked = true;
    }

    function ended() {
        stateEnded = true;
        if (trackDuration !== Infinity) {
            player.audio.src = "";
            player.skipNext();
        } else {
            player.audio.load();
            player.audio.play();
        }
    }

This code is for my own player, for the whole code see: https://github.com/oyosoftware/oyoplayer I'm also planning to write the visual part of the player myself, with my own pause button. This way I will be certain that I will have a 'real' pause. It isn't a surprise to me that so far, you didn't have any answers. Me myself couldn't find answers too. It is also a known fact that the HTML5 player has problems with stable buffering. With my own player I have tried to circumvent most problems to my best ability.