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

You can subscribe to the following events for video or audio elements:

• loadstart: The process of loading the resource begins.
• progress: The resource is being loaded.
• suspend: Loading has been suspended (e.g., network disconnection).
• abort: Loading has been aborted by the user.
• error: An error occurred during loading or playback.
• emptied: The network state of the element is empty.
• stalled: Data loading has stalled.
• loadedmetadata: Metadata is ready (sizes, duration).
• loadeddata: Initial data for playback is ready.
• canplay: The element can start playing, but may need buffering.
• canplaythrough: The element can play through to the end without stopping for buffering.
• playing: Playback has started.
• play: Playback has been started or resumed.
• pause: Playback has been paused.
• waiting: Playback has stopped due to buffering needs.
• seeking: The user is seeking through the timeline.
• seeked: The user has finished seeking.
• ended: Playback has finished.
• durationchange: The duration of the resource has changed.
• timeupdate: The current playback position has changed.
• volumechange: The volume or mute state has changed.
• ratechange: The playback rate has changed.
• resize: The size of the video has changed (e.g., due to device orientation change).
• cuechange: The active text cues for the current track have changed.

Example of subscribing to the play event:

// Get the video element
const videoElement = document.getElementById('myVideo');

// Subscribe to the 'play' event
videoElement.addEventListener('play', () => {
  // Actions when playback starts
  console.log('Video playback started');
});