onsuspend

onsuspend event

The onsuspend event in HTML is triggered when media playback is paused, often because the media is not available for playback. This event enables developers to run actions or scripts in response to the suspension, improving error handling and the overall user experience.

Syntax

addEventListener("suspend", (event) => {});
onsuspend = (event) => {};

Example

The following examples demonstrate how to attach an event listener to detect when the suspend event occurs on an HTMLMediaElement, then display a message when the event is triggered.

• Using addEventListener():

const video = document.querySelector("video");

video.addEventListener("suspend", (event) => {
  console.log("Data loading has been suspended.");
});

• Utilizing the onsuspend Event Handler Property:

const video = document.querySelector("video");

video.onsuspend = (event) => {
  console.log("Data loading has been suspended.");
};

Values

• <script>
  • The name of the <script> to run when the event is triggered.

Explanation

1. Video Element: The <video> tag includes the onsuspend event attribute, which triggers the handleSuspend function when playback is paused.
2. Alert Notification: If the <video> playback is suspended (such as when the source is not available), an alert notifies the user.

Ensure you replace "your-video-file.mp4" with the correct path to a valid video file for testing. The alert will appear if the <video> cannot continue due to a suspension issue.

Conclusion

The onsuspend event is triggered when media playback is paused, often due to issues with the media source. It allows developers to run scripts in response, improving error handling and user experience. This event is useful for notifying users when playback cannot continue.