HTML Video duration Property: Understanding Video Length

Table of Contents

HTML Video duration Property: Understanding Video Length

The duration property of the HTMLVideoElement interface provides access to the total length of the video in seconds. This property is read-only and is useful for displaying the video’s total duration to the user, calculating playback progress, or implementing custom video controls. In this guide, we’ll explore how to effectively use the duration property with practical examples.

What is the HTML Video duration Property?

The duration property returns a floating-point number representing the length of the media in seconds. If the duration is unknown or the media is not available, the property returns NaN (Not-a-Number).

Purpose of the HTML Video duration Property

The primary purposes of the duration property are to:

Display the total length of the video to the user.
Calculate and display the playback progress (e.g., in a progress bar).
Implement custom video controls and navigation features.
Perform actions based on the total duration of the video.

Syntax

The duration property is accessed as follows:

let videoDuration = videoElement.duration;

Return Value

Number: A floating-point number representing the duration of the video in seconds.
NaN: Returned if the duration is unknown or the media is not available.

Examples

Let’s explore some examples of how to use the duration property.

Displaying Video Duration

This example demonstrates how to display the video duration when the video’s metadata has loaded.

<video id="myVideoDuration" 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>Video duration: <span id="durationDisplay"></span> seconds</p>

<script>
  const videoDurationElement = document.getElementById("myVideoDuration");
  const durationDisplayElement = document.getElementById("durationDisplay");

  videoDurationElement.onloadedmetadata = function () {
    durationDisplayElement.textContent = videoDurationElement.duration;
  };
</script>

Output:

You will see the video duration displayed below the video player once the video metadata has loaded.

Calculating Playback Progress

This example shows how to calculate and display the playback progress using the duration and currentTime properties.

<video id="myVideoProgress" 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>
  Playback Progress: <span id="progressDisplay"></span> %
</p>

<script>
  const videoProgressElement = document.getElementById("myVideoProgress");
  const progressDisplayElement = document.getElementById("progressDisplay");

  videoProgressElement.ontimeupdate = function () {
    const progress =
      (videoProgressElement.currentTime / videoProgressElement.duration) * 100;
    progressDisplayElement.textContent = progress.toFixed(2);
  };
</script>

Output:

You will see the playback progress in percentage updated in real-time as the video plays.

Handling Unknown Duration

This example demonstrates how to handle cases where the video duration is unknown (NaN).

<video id="myVideoUnknown" 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>Video duration: <span id="unknownDurationDisplay"></span> seconds</p>

<script>
  const videoUnknownElement = document.getElementById("myVideoUnknown");
  const unknownDurationDisplayElement = document.getElementById(
    "unknownDurationDisplay"
  );

  videoUnknownElement.onloadedmetadata = function () {
    const duration = videoUnknownElement.duration;
    if (isNaN(duration)) {
      unknownDurationDisplayElement.textContent = "Unknown";
    } else {
      unknownDurationDisplayElement.textContent = duration;
    }
  };
</script>

Output:

You will see “Unknown” displayed if the video duration is not available, otherwise, the duration in seconds.

Creating a Custom Progress Bar

This example creates a custom progress bar using the duration and currentTime properties and updates it as the video plays.

<video id="myVideoCustom" 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>

<div class="progress-bar-container">
  <div id="customProgressBar" class="progress-bar"></div>
</div>

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

<script>
  const videoCustomElement = document.getElementById("myVideoCustom");
  const customProgressBarElement = document.getElementById("customProgressBar");

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

Output:

A custom progress bar will update as the video plays, visually indicating the playback progress.

Tips and Notes

Event Handling: Use the loadedmetadata event to ensure the duration is available before accessing it.
NaN Handling: Always check for NaN when accessing the duration property, as it indicates an unknown duration.
Real-time Updates: Use the timeupdate event to update playback progress and custom controls in real-time.
Browser Compatibility: The duration property is widely supported across modern browsers, but testing on older browsers is recommended. 💡

Browser Support

The duration property is widely supported across modern web browsers:

Chrome
Edge
Firefox
Safari
Opera

Conclusion

The duration property of the HTMLVideoElement is essential for understanding and manipulating video playback. By using this property, developers can display video lengths, calculate playback progress, and implement custom video controls. Understanding how to handle different scenarios, such as unknown durations, ensures a robust and user-friendly video experience. 🚀