JavaScript onseeked Event: Media Seeked

JavaScript onseeked Event: Media Seeked

The onseeked event in JavaScript is triggered when the seeking operation within a media element (such as <video> or <audio>) is complete. This event is essential for managing playback and synchronization in web applications that handle media, allowing developers to respond when a user has finished moving to a new point in the media’s timeline. This guide will explore the nuances of the onseeked event, providing a thorough understanding of its usage and potential applications.

What is the onseeked Event?

The onseeked event fires after the user has successfully moved to a new playback position in the media. This is distinct from the seeking event, which fires during the seeking process. The onseeked event indicates that the media is ready to play from the new position. This event allows developers to execute functions when the seeking action is finalized, ensuring the media has moved to the desired time, especially important when handling user input or synchronizing media with other elements.

Purpose of the onseeked Event

The main purposes of the onseeked event are to:

• Handle User Interaction: Execute specific actions when a user finishes navigating through the timeline.
• Synchronize Media Playback: Ensure that changes in playback time are immediately reflected in associated elements.
• Enhance Media Control: Provide a mechanism to update UI elements after seeking completion.
• Create Custom Media Experiences: Allow for the creation of interactive and custom media player functionalities.

Syntax of the onseeked Event

The onseeked event can be added either as an HTML attribute or as a JavaScript property.

HTML Attribute:

<media-element onseeked="yourFunction()"> </media-element>

JavaScript Property:

mediaElement.onseeked = function() {
    // your code here
};

Note: The “media-element” placeholder here represents <video> or <audio> HTML elements. 📝

Important Attributes and Properties

Understanding these attributes and properties associated with the onseeked event helps in utilizing it effectively.

Attribute/Property	Type	Description
`onseeked`	Event Handler	The event handler that is triggered after the media has finished seeking a new position.
`currentTime`	Number	A media element property that represents the current playback position in seconds. It’s updated after the seek action is complete and can be used within an `onseeked` event handler to get the new position.
`duration`	Number	A media element property that represents the total duration of the media in seconds. This can be used to determine if the seeking was done at the end of media
`target`	Element	A property of the event object. It refers to the HTML media element that triggered the `onseeked` event.
`type`	String	A property of the event object. Indicates the type of the event. In this case, it would be “seeked”.

Basic Usage Examples

Let’s begin with some basic examples of how to use the onseeked event, illustrating its core functionality in a straightforward manner.

Example 1: Logging Seeked Time

This example demonstrates how to log the current time of the media after a seek operation is completed.

<video
  id="myVideo1"
  width="320"
  height="240"
  controls
  src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
></video>
<div id="output1"></div>

<script>
  const myVideo1 = document.getElementById("myVideo1");
  const output1 = document.getElementById("output1");
  myVideo1.onseeked = function () {
    output1.textContent =
      "Seeked to: " + Math.round(myVideo1.currentTime) + " seconds";
  };
</script>

Output:

(A video player that logs the seeked time into the output div after user seeks the video)

Example 2: Handling Audio Seeking

This example shows how to use the onseeked event with an audio element to display a message when the seeking is completed.

<audio
  id="myAudio2"
  controls
  src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
></audio>
<div id="output2"></div>

<script>
  const myAudio2 = document.getElementById("myAudio2");
  const output2 = document.getElementById("output2");

  myAudio2.onseeked = function () {
    output2.textContent = "Audio seeked!";
  };
</script>

Output:

(An audio player that displays “Audio Seeked!” in the output2 div when the seek operation completes.)

Advanced Usage Examples

Let’s delve into more complex examples of how the onseeked event can be used in practical scenarios.

Example 3: Synchronizing Media with a Progress Bar

This example demonstrates how to keep a custom progress bar in sync with a video’s playback using the onseeked event. This is useful for visually tracking a video’s progress, using currentTime and duration.

<video
  id="myVideo3"
  width="320"
  height="240"
  controls
  src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
></video>
<div class="progress-bar-container">
  <div id="progressBar3" class="progress-bar"></div>
</div>

<style>
  .progress-bar-container {
    width: 320px;
    height: 10px;
    background-color: #eee;
    margin-top: 5px;
  }
  .progress-bar {
    width: 0;
    height: 10px;
    background-color: #4CAF50;
  }
</style>

<script>
  const myVideo3 = document.getElementById("myVideo3");
  const progressBar3 = document.getElementById("progressBar3");

  myVideo3.onseeked = function () {
    const progress = (myVideo3.currentTime / myVideo3.duration) * 100;
    progressBar3.style.width = progress + "%";
  };
  myVideo3.ontimeupdate = function() {
    const progress = (myVideo3.currentTime / myVideo3.duration) * 100;
     progressBar3.style.width = progress + "%";
  }
</script>

Output:

(A video player with a progress bar that updates as the video is played and seeked. Initially the progress bar will be at zero and will progress with the current time of the video.)

Example 4: Implementing Custom Seek Behavior

This example showcases how to use the onseeked event to modify or enhance the default behavior of seeking. Here, the code logs both where the user started seeking from and where the video has completed the seek.

<video
  id="myVideo4"
  width="320"
  height="240"
  controls
  src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
></video>
<div id="output4"></div>

<script>
  const myVideo4 = document.getElementById("myVideo4");
  const output4 = document.getElementById("output4");
  let seekStart = 0;
  myVideo4.addEventListener('seeking', function () {
    seekStart = myVideo4.currentTime;
  });
  myVideo4.onseeked = function () {
    output4.innerHTML += `<br> Seeked from: ${Math.round(seekStart)} to ${Math.round(myVideo4.currentTime)}`;
  };
</script>

Output:

(A video player that logs the seeked start and end times in the output4 div, with every seek operation.)

Practical Applications of onseeked

The onseeked event is invaluable in a range of practical applications. Here are a few examples:

• Interactive Storytelling: Synchronizing media with interactive elements based on the playback time.
• Educational Content: Updating information or quizzes as the user seeks to a specific point in a video tutorial.
• Custom Media Players: Enhancing media control by providing a consistent and accurate user experience.
• Accessibility: Ensuring that users of screen readers receive precise feedback after they’ve seeked a video or audio file.

Browser Compatibility

The onseeked event is supported by all modern browsers, making it a reliable choice for cross-browser media applications.

Browser	Version
Chrome	1+
Edge	12+
Firefox	1+
Safari	3.1+
Opera	10.5+

Tips and Best Practices

• Use with currentTime: Access the media element’s currentTime property within the onseeked event handler to get the new playback position.
• Avoid Heavy Operations: Keep event handler functions lightweight to prevent lag.
• Use event.target: Always use event.target to refer to the element generating the event, especially when using event listeners.
• Synchronize Carefully: Ensure UI elements are synchronized correctly with seeked time to prevent user confusion.

Conclusion

The onseeked event is a valuable asset for web developers working with media elements. It enables handling user interactions, synchronizing playback, and implementing enhanced control features for a wide array of media applications. By understanding and utilizing this event, you can provide a smoother, more intuitive, and engaging experience for your users.