HTML Video currentTime Property: Video Current Time

HTML Video currentTime Property: Mastering Video Playback Position

The HTML Video currentTime property is a fundamental aspect of controlling video playback in web applications. It allows you to both retrieve and set the current playback position of a video, enabling features like seeking, resuming playback, and creating custom video players. This comprehensive guide will walk you through the essentials of the currentTime property, providing practical examples and insights for effective use.

What is the currentTime Property?

The currentTime property of the HTML <video> element is a numeric value that represents the current playback position of the video, measured in seconds. You can read this property to determine where the video is currently playing, and you can set it to jump to a specific point in the video.

Purpose of the currentTime Property

The primary purpose of the currentTime property is to provide control over the video’s playback position, allowing developers to:

• Implement custom video player controls for seeking.
• Save and restore playback positions for resuming videos later.
• Synchronize video playback with other elements on the page.
• Create interactive video experiences based on the current playback time.

Syntax

Getting the Current Time

To retrieve the current playback position of a video, access the currentTime property of the video element:

const currentTime = videoElement.currentTime;

Setting the Current Time

To set the current playback position, assign a numeric value (in seconds) to the currentTime property:

videoElement.currentTime = 30; // Jump to 30 seconds

Important Notes

• The currentTime property is a floating-point number, allowing for precise positioning.
• Setting currentTime will trigger the timeupdate event on the video element.
• If the specified time is outside the video’s duration, the browser will adjust it to the nearest valid time (0 or the video’s duration). ⚠️

Examples

Let’s explore some practical examples of using the currentTime property with the HTML <video> element.

Getting and Displaying the Current Time

This example demonstrates how to retrieve the current playback position of a video and display it in real-time.

<video id="myVideo_1" width="320" height="176" controls>
  <source
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>
<p>Current Time: <span id="currentTimeDisplay_1">0</span> seconds</p>

<script>
  const video_1 = document.getElementById("myVideo_1");
  const currentTimeDisplay_1 = document.getElementById("currentTimeDisplay_1");

  video_1.addEventListener("timeupdate", function () {
    currentTimeDisplay_1.textContent = video_1.currentTime.toFixed(2);
  });
</script>

<video id="myVideo_1" width="320" height="176" controls>
  <source
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>
<p>Current Time: <span id="currentTimeDisplay_1">0</span> seconds</p>

The above code displays a video with standard controls. The current playback time is shown beneath the player and dynamically updates as the video plays.

Setting the Current Time with a Button

This example demonstrates how to create a button that jumps the video to a specific point in time.

<video id="myVideo_2" width="320" height="176" controls>
  <source
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>
<br />
<button id="jumpButton_2">Jump to 10 seconds</button>

<script>
  const video_2 = document.getElementById("myVideo_2");
  const jumpButton_2 = document.getElementById("jumpButton_2");

  jumpButton_2.addEventListener("click", function () {
    video_2.currentTime = 10;
  });
</script>

<video id="myVideo_2" width="320" height="176" controls>
  <source
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>
<br />
<button id="jumpButton_2">Jump to 10 seconds</button>

Clicking the “Jump to 10 seconds” button will immediately set the video’s currentTime to 10 seconds, causing it to jump to that point in the video.

Creating a Seek Bar

This example demonstrates how to create a custom seek bar using an HTML range input element and the currentTime property.

<video id="myVideo_3" width="320" height="176" controls>
  <source
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>
<br />
<input
  type="range"
  id="seekBar_3"
  value="0"
  min="0"
  max="100"
  step="0.1"
/>

<script>
  const video_3 = document.getElementById("myVideo_3");
  const seekBar_3 = document.getElementById("seekBar_3");

  video_3.addEventListener("loadedmetadata", function () {
    seekBar_3.max = video_3.duration;
  });

  video_3.addEventListener("timeupdate", function () {
    seekBar_3.value = video_3.currentTime;
  });

  seekBar_3.addEventListener("input", function () {
    video_3.currentTime = seekBar_3.value;
  });
</script>

<video id="myVideo_3" width="320" height="176" controls>
  <source
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>
<br />
<input
  type="range"
  id="seekBar_3"
  value="0"
  min="0"
  max="100"
  step="0.1"
/>

The seek bar allows you to scrub through the video by dragging the slider. The loadedmetadata event ensures that the seek bar’s max attribute is set to the video’s duration once the video’s metadata has loaded.
The slider position will also update dynamically as the video is playing.

Saving and Restoring Playback Position

This example demonstrates how to save the current playback position to local storage when the page is closed and restore it when the page is reopened.

<video id="myVideo_4" width="320" height="176" controls>
  <source
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>

<script>
  const video_4 = document.getElementById("myVideo_4");
  const storageKey_4 = "videoPlaybackPosition";

  // Restore playback position on page load
  window.addEventListener("load", function () {
    const savedTime_4 = localStorage.getItem(storageKey_4);
    if (savedTime_4) {
      video_4.currentTime = savedTime_4;
    }
  });

  // Save playback position before page unload
  window.addEventListener("beforeunload", function () {
    localStorage.setItem(storageKey_4, video_4.currentTime);
  });
</script>

<video id="myVideo_4" width="320" height="176" controls>
  <source
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    type="video/mp4"
  />
  Your browser does not support HTML video.
</video>

This code saves the video’s current time to local storage when the page unloads and restores it when the page loads, allowing the video to resume from where it was left off.

Real-World Applications of the currentTime Property

The currentTime property is used in various applications, including:

• Custom Video Players: Implementing seek functionality, progress tracking, and other player controls.
• E-Learning Platforms: Saving and restoring progress in video lessons.
• Video Editing Tools: Precisely positioning and synchronizing video clips.
• Interactive Video Experiences: Triggering events or actions based on the current playback time.

Browser Support

The currentTime property is supported by all modern web browsers, ensuring consistent behavior across different platforms.

Conclusion

The HTML Video currentTime property is a powerful tool for controlling video playback in web applications. By understanding how to get and set the current playback position, you can create custom video players, implement seek functionality, and build engaging video experiences. This guide should provide you with the knowledge and examples to effectively use the currentTime property in your projects. Happy coding! 🚀