HTML | DOM Video played Property
The Video played property is used for returning a TimeRanges object.
The TimeRanges object is used in cases when you want to represent the ranges of a video that have already been played by the user.
A played range is a time range of a played video. If a user skips in the video, he may get several played ranges.
The video played property is a read-only property.
The TimeRanges 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.played
Below program illustrates the Video played property :
Example: Getting the first played range of the video in seconds.
<!DOCTYPE html>
< html >
< head >
< title >
HTML | DOM Video played Property
</ title >
< style >
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >Video played 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 first played range of the video
in seconds, double click the
"Return Played Range" button.
</ p >
< button ondblclick = "My_VideoRate()"
type = "button" >
Return Played Range
</ button >
< p id = "test" ></ p >
< script >
function My_VideoRate() {
var v = document.getElementById("Test_Video");
document.getElementById("test").innerHTML =
"Starts At: " + v.played.start(0) +
" Ends At: " + v.played.end(0);
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by HTML | DOM Video played Property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Apple Safari
Last Updated :
05 Aug, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...