Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML onended Attribute

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

Photo Credit to CodeToFun

🙋 Introduction

The onended attribute is a powerful feature in HTML that allows developers to specify a JavaScript function to be executed when a media element, such as an audio or video player, finishes playing its content.

This attribute provides a way to trigger actions or events based on the completion of media playback.

🎯 Purpose of onended

The primary purpose of the onended attribute is to enable developers to define custom behavior or execute specific actions when a media element reaches the end of its content.

This can be particularly useful for creating interactive and dynamic web applications that respond to the completion of audio or video playback.

💎 Values

The onended attribute accepts a JavaScript function as its value.

This function will be executed when the media element completes its playback. Here's a simple example:

onended.html
Copied
Copy To Clipboard
<audio controls onended="myFunction()">
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

🧠 How it Works

In this example, the myFunction() JavaScript function will be called when the audio playback reaches its end. You can replace "myFunction()" with the name of your custom function.

📄 Example

Let's look at a more comprehensive example of how to use the onended attribute in conjunction with JavaScript:

onended.html
Copied
Copy To Clipboard
<script>
  function handleMediaEnd() {
    alert("Media playback has ended!");
    // Additional custom actions can be added here
  }
</script>

<audio controls onended="handleMediaEnd()">
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

🧠 How it Works

In this example, the handleMediaEnd() function will be executed when the audio playback concludes. You can customize this function to perform any desired actions.

🔄 Dynamic Values with JavaScript

You can also dynamically set the onended attribute using JavaScript.

This is beneficial when you want to change the behavior based on user interactions or other conditions. Here's a brief example:

onended.html
Copied
Copy To Clipboard
<script>
  // Dynamically set onended for an audio element
  document.getElementById("dynamicAudio").onended = function() {
    console.log("Custom onended event triggered!");
    // Additional custom actions can be added here
  };
</script>

<audio controls id="dynamicAudio">
  <source src="dynamic_audio.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

🧠 How it Works

In this script, the onended attribute is dynamically set for an audio element with the id "dynamicAudio." This allows you to define a custom function for handling the end of playback dynamically.

🏆 Best Practices

  • Utilize the onended attribute to enhance user experience by triggering relevant actions or events when media playback concludes.
  • Ensure that the JavaScript function assigned to onended is well-defined and performs the intended actions.
  • Test your implementation across different browsers to ensure compatibility.

🎉 Conclusion

The onended attribute provides a valuable tool for developers working with media elements in HTML.

By leveraging this attribute, you can create more interactive and responsive web applications that respond to the completion of audio or video playback.

👨‍💻 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 onended 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