Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML onemptied Attribute

Posted in HTML Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 42 - Views
⏳ 4 mins
💬 1 Comment
HTML onemptied Attribute

Photo Credit to CodeToFun

🙋 Introduction

The onemptied attribute in HTML is an event handler attribute that is triggered when a media element, such as <audio> or <video>, is reset to its initial state.

This event occurs when the media resource becomes empty or when the user seeks back to the beginning of the media.

🎯 Purpose of onemptied

The primary purpose of the onemptied attribute is to allow developers to execute JavaScript code or functions when the emptied event occurs.

This can be useful for handling specific actions or behavior adjustments in response to the media element being reset.

💎 Values

The onemptied attribute accepts JavaScript code or function references.

When the media element is emptied, the associated JavaScript code or function is executed.

Here's an example of how to use the onemptied attribute:

onemptied.html
Copied
Copy To Clipboard
<video controls onemptied="handleEmptyEvent()">
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  function handleEmptyEvent() {
    console.log("Media element has been emptied!");
    // Add your custom logic here
  }
</script>

🧠 How it Works

In this example, the onemptied attribute is set to call the handleEmptyEvent function when the associated <video> element is emptied

🔄 Dynamic Values with JavaScript

Just like with other event handler attributes, you can also dynamically assign values to the onemptied attribute using JavaScript.

This enables you to customize the behavior based on dynamic conditions or user interactions. Here's a brief example:

onemptied.html
Copied
Copy To Clipboard
<script>
  // Dynamically set the onemptied attribute for a video element
  document.getElementById("dynamicVideo").onemptied = function() {
    console.log("Dynamic onemptied event triggered!");
    // Add your dynamic logic here
  };
</script>

🧠 How it Works

In this script, the onemptied attribute is dynamically set for a video element with the id dynamicVideo.

🏆 Best Practices

  • Use the onemptied attribute to handle specific actions or adjustments when a media element is emptied.
  • Consider providing alternative content or user feedback when media elements are emptied, especially if the media is a crucial part of your web page.
  • Ensure cross-browser compatibility by testing the behavior of the onemptied attribute in various browsers.

🎉 Conclusion

The onemptied attribute is a valuable tool for enhancing the interactivity of web pages that include media elements.

By utilizing this attribute and understanding its behavior, you can create more dynamic and responsive user experiences.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
8 months ago

If you have any doubts regarding this article (HTML onemptied Attribute), please comment here. I will help you immediately.

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy