HTML | DOM Video seekable Property

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> 

Output:

Before clicking the button:
After clicking the button:

Supported Browsers: The browser supporte by HTML | DOM Video seekable Property are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Apple Safari

My Personal Notes

Recommended Posts: