HTML onseeked Attribute

Posted in HTML Tutorial

Updated on Oct 29, 2024

By Mari Selvan

👁️ 79 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The onseeked attribute is an event handler attribute in HTML that specifies a script to run when a seek operation (a change in the position of the playback) has ended in an audio or video element.

This attribute provides developers with the ability to execute custom JavaScript code in response to the completion of a seek operation.

🎯 Purpose of onseeked

The main purpose of the onseeked attribute is to allow developers to define custom behavior or actions that should occur once a seek operation has been successfully completed.

This can be useful for scenarios where you want to synchronize additional actions or events with the seeking process in multimedia elements.

💎 Values

As an event handler attribute, the onseeked attribute takes a JavaScript function as its value. This function will be executed when the seeked event occurs. Here's a simple example:

onseeked.html

Copied

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

<script>
  function seekedHandler() {
    console.log("Seek operation completed!");
    // Add your custom actions here
  }
</script>

🧠 How it Works

In this example, the onseeked attribute is assigned the value seekedHandler(), which is a JavaScript function that will be called when the seeked event occurs.

🔄 Dynamic Values with JavaScript

Similar to other event handler attributes, you can dynamically set the onseeked attribute using JavaScript.

This allows you to change the behavior of the seeked event handler based on certain conditions or user interactions. Here's an illustration:

onseeked.html

Copied

<script>
  // Dynamically set onseeked event handler
  document.getElementById("myVideo").onseeked = function() {
    console.log("Dynamic seeked event handler executed.");
    // Add your dynamic actions here
  };
</script>

🧠 How it Works

In this script, the onseeked attribute is dynamically set for a video element with the id myVideo. The assigned function will be executed when the seeked event occurs.

🏆 Best Practices

Use the onseeked attribute when you need to perform custom actions or updates after a seek operation in multimedia elements.
Keep the event handler functions concise and focused on the specific actions you want to take in response to the seeked event.
Test your implementation across different browsers to ensure consistent behavior.

🎉 Conclusion

The onseeked attribute provides a valuable tool for developers working with multimedia elements, allowing them to respond to seek operations with custom JavaScript code.

By understanding and utilizing this attribute, you can enhance the interactivity and responsiveness of your audio and video elements.