Skip to content

Instantly share code, notes, and snippets.

@alexrqs
Last active November 12, 2024 20:35
Show Gist options
  • Save alexrqs/a6db03bade4dc405a61c63294a64f97a to your computer and use it in GitHub Desktop.
Save alexrqs/a6db03bade4dc405a61c63294a64f97a to your computer and use it in GitHub Desktop.
VideoJS event list
// 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
@kevireilly
Copy link

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:

@preciousuwhubetine
Copy link

thanks!

@fabioricali
Copy link

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