What events can you subscribe to for video or audio elements?

You can subscribe to numerous events related to playback, loading, errors, and state changes.

Main multimedia events:

• loadstart
• progress
• suspend
• abort
• error
• emptied
• stalled
• loadedmetadata
• loadeddata
• canplay
• canplaythrough
• playing
• waiting
• seeking
• seeked
• ended
• durationchange
• timeupdate
• play
• pause
• ratechange
• resize
• volumechange

Example of usage:

const videoElement = document.querySelector('video');

videoElement.addEventListener('play', () => {
  // Actions when playback starts
  console.log('Video is playing');
});

videoElement.addEventListener('pause', () => {
  // Actions when playback is paused
  console.log('Video is paused');
});

videoElement.addEventListener('ended', () => {
  // Actions when playback ends
  console.log('Video has ended');
});

videoElement.addEventListener('timeupdate', () => {
  // Actions on current time update
  console.log('Current time: ' + videoElement.currentTime);
});