HTML onended Attribute

Posted in HTML Tutorial

Updated on Jan 28, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

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

<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

<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

<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.