HTML ondurationchange Attribute

Posted in HTML Tutorial

Updated on Jan 28, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The ondurationchange attribute in HTML is an event handler that is triggered when the duration attribute of a media element changes.

This event is commonly associated with audio and video elements, providing developers with a way to respond to changes in the media duration dynamically.

🎯 Purpose of ondurationchange

The primary purpose of the ondurationchange attribute is to enable developers to execute JavaScript code in response to changes in the duration of a media element.

This can be useful for scenarios where you want to update the user interface, display additional information, or perform other actions based on the length of the media.

💎 Values

The ondurationchange attribute is an event handler, and as such, it doesn't have specific values like some other attributes.

Instead, it is assigned a JavaScript function that will be executed when the durationchange event occurs.

📄 Example

Let's look at a simple example of how to use the ondurationchange attribute with a video element:

ondurationchange.html

Copied

<video controls ondurationchange="updateDuration()">
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  function updateDuration() {
    var video = document.querySelector('video');
    console.log('New duration: ' + video.duration);
    // Additional actions can be performed based on the updated duration
  }
</script>

🧠 How it Works

In this example, the ondurationchange attribute is set to the JavaScript function updateDuration().

This function logs the new duration of the video element to the console. You can customize the function to perform actions based on the updated duration.

🔄 Dynamic Values with JavaScript

Similar to other event handlers, you can dynamically assign the ondurationchange attribute using JavaScript.

This is helpful when you want to set event handlers based on certain conditions or user interactions. Here's an example:

ondurationchange.html

Copied

<script>
  // Dynamically set ondurationchange for a video element
  var videoElement = document.getElementById("dynamicVideo");
  videoElement.ondurationchange = function() {
    console.log('Dynamic duration change detected!');
    // Additional actions can be performed based on the updated duration
  };
</script>

🧠 How it Works

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

The associated function logs a message to the console, but you can customize it to suit your specific requirements.

🏆 Best Practices

Use the ondurationchange attribute when you need to respond to changes in the duration of media elements dynamically.
Always consider user experience when implementing event handlers, ensuring that any updates or actions based on duration changes enhance the overall interaction.
Test your code across different browsers to ensure consistent behavior, as browser support may vary.