Video Event Filter
A simple module to filter the events sent from the video element in a way that align with what is, most probably, expected from an analytics perspective.
Difference vs default events
The main differences that this filtering brings is
- No
pause
is triggered while not playing. I.e. for seek, buffering or similar. - Instead of
waiting
event we have a properbuffering
andbuffered
event flow. -
timeupdate
is only triggered during ongoing playback. - A
play
event afterpause
is now calledresume
to differ from theplay
event.
Implementation
import { VideoEventFilter } from "@eyevinn/video-event-filter";
const videoElement = document.querySelector("video");
const videoEventFilter = new VideoEventFilter(videoElement);
videoEventFilter.addEventListener("*", (event, data) => {
console.log("EVENT:", event);
});
Events
These are exposed as an Enum PlayerEvents
.
loading
-
loaded
, video have loaded, but not started -
play
, video have started to play pause
-
resume
, video have started to play after apause
seeking
-
seeked
, video is done seeking. Continue in the state that existed before. buffering
-
buffered
, video is done buffering. Continue in the state that existed before. timeupdate
ended
error
States
You can also fetch the current state from the player, which will match the states exposed in PlayerState
.
import { VideoEventFilter } from "@eyevinn/video-event-filter";
const videoElement = document.querySelector("video");
const videoEventFilter = new VideoEventFilter(videoElement);
const currentState = videoEventFilter.getState()