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 browsers supported by HTML | DOM Video seekable Property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Apple Safari