HTML | DOM Video seekable Property

Last Updated : 16 Dec, 2020

The Video seekable property is used for returning a TimeRanges object. The TimeRanges object is used for representing the ranges of the video which are available for seeking by the user.
The time-range of video which is available for seeking i.e. moving playback position is called a seekable range.
It is often possible to seek anywhere in the video even before it has been buffered if its a non-streaming video.
The Video seekable property is a read-only property.
The time ranges of object properties are:

length: It is used to get the number of played ranges in the video
start(index): It is used to get the start position of a played range
end(index): it is used to get the end position of a played range

Syntax:

videoObject.seekable

Below program illustrates the Video seekable property.
Example: Getting the first seekable range of the video in seconds.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Video seekable Property
    </title>
</head>
  
<body style="text-align: center">
  
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <h2 style="font-family: Impact">
      Video seekable Property
    </h2>
    <br>
  
    <video id="Test_Video"
           width="360" 
           height="240" 
           controls>
        <source src="samplevideo.mp4" 
                type="video/mp4">
        <source src="movie.ogg" 
                type="video/ogg">
    </video>
  
      
<p>To return the seeable range of the video,
      double click the "Return Range" button.</p>
  
  
    <button ondblclick="My_Video()" 
            type="button">
      Return Range
    </button>
  
    <p id="test"></p>
  
  
    <script>
        function My_Video() {
            var v = document.getElementById("Test_Video");
            
            document.getElementById("test").innerHTML =
                "Start Point: " + v.seekable.start(0) +
                " End Point: " + v.seekable.end(0);
        }
    </script>
  
</body>
  
</html>