Last active
November 12, 2024 20:35
-
-
Save alexrqs/a6db03bade4dc405a61c63294a64f97a to your computer and use it in GitHub Desktop.
VideoJS event list
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // The events are from https://www.w3.org/TR/html5/semantics-embedded-content.html#media-elements-event-summary | |
| import videojs from 'video.js' | |
| const Plugin = videojs.getPlugin('plugin') | |
| const EVENTS = [ | |
| 'loadstart', | |
| 'progress', | |
| 'suspend', | |
| 'abort', | |
| 'error', | |
| 'emptied', | |
| 'stalled', | |
| 'loadedmetadata', | |
| 'loadeddata', | |
| 'canplay', | |
| 'canplaythrough', | |
| 'playing', | |
| 'waiting', | |
| 'seeking', | |
| 'seeked', | |
| 'ended', | |
| 'durationchange', | |
| 'timeupdate', | |
| 'play', | |
| 'pause', | |
| 'ratechange', | |
| 'resize', | |
| 'volumechange', | |
| ] | |
| class EventLogger extends Plugin { | |
| constructor(player) { | |
| super(player) | |
| this.on(player, EVENTS, this.logEvents) | |
| } | |
| logEvents(event) { | |
| videojs.log(event) | |
| } | |
| /** | |
| * This function stops the plugin on dispose | |
| */ | |
| dispose() { | |
| super.dispose() | |
| videojs.log('the EventLogger plugin is being disposed') | |
| } | |
| } | |
| export default EventLogger | |
thx! 🤩
@vksbansal For quality and segment change events, here is an example implementation
https://github.com/apivideo/api.video-videojs-analytics/blob/main/index.ts#L87
Updated exhaustive list of events:
const EVENTS = [
// HTMLMediaElement events
'abort',
'canplay',
'canplaythrough',
'durationchange',
'emptied',
'ended',
'error',
'loadeddata',
'loadedmetadata',
'loadstart',
'pause',
'play',
'playing',
'progress',
'ratechange',
'seeked',
'seeking',
'stalled',
'suspend',
'timeupdate',
'volumechange',
'waiting',
// HTMLVideoElement events
'enterpictureinpicture',
'leavepictureinpicture',
// Element events
'fullscreenchange',
'resize',
// video.js events
'audioonlymodechange',
'audiopostermodechange',
'controlsdisabled',
'controlsenabled',
'debugon',
'debugoff',
'disablepictureinpicturechanged',
'dispose',
'enterFullWindow',
'error',
'exitFullWindow',
'firstplay',
'fullscreenerror',
'languagechange',
'loadedmetadata',
'loadstart',
'playerreset',
'playerresize',
'posterchange',
'ready',
'textdata',
'useractive',
'userinactive',
'usingcustomcontrols',
'usingnativecontrols',
];
Notes:
- Some of the [...]Element specific events are emitted by video.js which may have differences versus a raw element binding
- Each inherited [...]Element have more events and were not listed unless potentially useful from a general video perspective
Sources:
thanks!
Updated exhaustive list of events:
const EVENTS = [ // HTMLMediaElement events 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', // HTMLVideoElement events 'enterpictureinpicture', 'leavepictureinpicture', // Element events 'fullscreenchange', 'resize', // video.js events 'audioonlymodechange', 'audiopostermodechange', 'controlsdisabled', 'controlsenabled', 'debugon', 'debugoff', 'disablepictureinpicturechanged', 'dispose', 'enterFullWindow', 'error', 'exitFullWindow', 'firstplay', 'fullscreenerror', 'languagechange', 'loadedmetadata', 'loadstart', 'playerreset', 'playerresize', 'posterchange', 'ready', 'textdata', 'useractive', 'userinactive', 'usingcustomcontrols', 'usingnativecontrols', ];Notes:
- Some of the [...]Element specific events are emitted by video.js which may have differences versus a raw element binding
- Each inherited [...]Element have more events and were not listed unless potentially useful from a general video perspective
Sources:
good this one!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
is there an event for quality/adaption change?