https://github.com/Eyevinn/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.
https://github.com/Eyevinn/video-event-filter
library
Last synced: 12 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/Eyevinn/video-event-filter
- Owner: Eyevinn
- License: mit
- Created: 2020-11-24T07:45:25.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-07T13:00:24.000Z (over 2 years ago)
- Last Synced: 2025-05-07T20:44:20.433Z (about 1 year ago)
- Topics: library
- Language: TypeScript
- Size: 205 KB
- Stars: 5
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
> [!CAUTION]
> This repository has been deprecated in favour of [eyevinn/media-event-filter](https://github.com/Eyevinn/media-event-filter "Media Event Filter")
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 proper **`buffering`** and `buffered` event flow.
- `timeupdate` is only triggered during ongoing playback.
- A `play` event after `pause` is now called **`resume`** to differ from the `play` event.
## Implementation
```js
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 a `pause`
- `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`.
```js
import { VideoEventFilter } from "@eyevinn/video-event-filter";
const videoElement = document.querySelector("video");
const videoEventFilter = new VideoEventFilter(videoElement);
const currentState = videoEventFilter.getState()
```