HTML Video seekable Property: Video Seekable

HTML Video seekable Property: Understanding Video Seekable Ranges

The HTML <video> element’s seekable property is a crucial attribute for understanding the seekable ranges of a video. This property allows you to determine which parts of the video the user can jump to, providing insights into the video’s availability and loading status. It returns a TimeRanges object, which represents the ranges of the video that the user can seek to.

What is the seekable Property?

The seekable property is a read-only attribute of the HTML <video> element. It provides a TimeRanges object that indicates the ranges of the video that are available for seeking. These ranges can change during playback as more of the video is loaded or buffered.

Purpose of the seekable Property

The primary purpose of the seekable property is to:

• Determine the available seekable ranges in a video.
• Provide information about the video’s loading and buffering status.
• Allow developers to create custom video player controls that reflect the available seekable ranges.

Syntax

The seekable property is accessed via the DOM using JavaScript. It returns a TimeRanges object.

const timeRanges = videoElement.seekable;

TimeRanges Object

The TimeRanges object has the following properties and methods:

Examples

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

Basic Example: Displaying Seekable Ranges

This example demonstrates how to retrieve and display the seekable ranges of a video.

<video
  id="myVideoSeekable"
  width="640"
  height="360"
  controls
  preload="metadata"
>
  <source
    src="https://www.w3schools.com/html/movie.mp4"
    type="video/mp4"
  />
  Your browser does not support the video tag.
</video>
<p id="seekableOutput"></p>

<script>
  const videoSeekable = document.getElementById("myVideoSeekable");
  const seekableOutput = document.getElementById("seekableOutput");

  videoSeekable.addEventListener("loadedmetadata", () => {
    const seekableRanges = videoSeekable.seekable;
    let output = "Seekable ranges: ";
    for (let i = 0; i < seekableRanges.length; i++) {
      output +=
        "[" +
        seekableRanges.start(i) +
        " - " +
        seekableRanges.end(i) +
        "] ";
    }
    seekableOutput.textContent = output;
  });
</script>

In this example, the loadedmetadata event is used to ensure that the video’s metadata is loaded before accessing the seekable property. The seekable ranges are then displayed in a paragraph element.

Advanced Example: Creating a Custom Seek Bar

This example demonstrates how to create a custom seek bar that reflects the seekable ranges of the video.

<video
  id="myVideoCustomSeek"
  width="640"
  height="360"
  controls
  preload="metadata"
>
  <source
    src="https://www.w3schools.com/html/movie.mp4"
    type="video/mp4"
  />
  Your browser does not support the video tag.
</video>
<div id="customSeekbar">
  <div id="seekableProgress"></div>
  <input type="range" id="customSeekInput" value="0" />
</div>
<style>
  #customSeekbar {
    width: 640px;
    height: 10px;
    background-color: #ddd;
    margin-top: 10px;
    position: relative;
  }
  #seekableProgress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #aaa;
  }
  #customSeekInput {
    width: 100%;
    position: absolute;
    top: -2px;
    left: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    pointer-events: none;
  }
  #customSeekInput::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background-color: #4caf50;
    cursor: pointer;
    pointer-events: auto;
  }
</style>

<script>
  const videoCustomSeek = document.getElementById("myVideoCustomSeek");
  const customSeekbar = document.getElementById("customSeekbar");
  const seekableProgress = document.getElementById("seekableProgress");
  const customSeekInput = document.getElementById("customSeekInput");

  videoCustomSeek.addEventListener("loadedmetadata", () => {
    customSeekInput.max = videoCustomSeek.duration;
    updateSeekableProgress();
  });

  videoCustomSeek.addEventListener("timeupdate", () => {
    customSeekInput.value = videoCustomSeek.currentTime;
  });

  customSeekInput.addEventListener("input", () => {
    videoCustomSeek.currentTime = customSeekInput.value;
  });

  videoCustomSeek.addEventListener("progress", () => {
    updateSeekableProgress();
  });

  function updateSeekableProgress() {
    const seekableRanges = videoCustomSeek.seekable;
    if (seekableRanges.length > 0) {
      const bufferedEnd = seekableRanges.end(0);
      const duration = videoCustomSeek.duration;
      const percentage = (bufferedEnd / duration) * 100;
      seekableProgress.style.width = percentage + "%";
    }
  }
</script>

In this example, a custom seek bar is created using HTML and CSS. The seekable property is used to update the width of the seekableProgress element, reflecting the buffered range of the video. The input event is used to allow the user to seek to different parts of the video.

Real-World Applications of the seekable Property

The seekable property is used in various scenarios:

• Custom Video Players: Creating custom video player controls that accurately reflect the seekable ranges.
• Adaptive Streaming: Determining the available segments for adaptive streaming algorithms.
• Video Editing Tools: Providing users with information about the available ranges for editing.
• Progressive Download Indicators: Displaying the buffered range of the video to the user.

Browser Support

The seekable property is supported by all modern web browsers.

Tips and Notes

• Always use the loadedmetadata event to ensure that the video’s metadata is loaded before accessing the seekable property. 💡
• The seekable property returns a TimeRanges object, which represents the ranges of the video that are available for seeking. 📝
• The seekable ranges can change during playback as more of the video is loaded or buffered. ✅
• Use the progress event to update the seekable ranges as the video loads. 👀

Conclusion

The HTML video seekable property is a valuable tool for understanding the seekable ranges of a video. By using this property, you can create custom video player controls that accurately reflect the video’s loading and buffering status, providing a better user experience.