HTML | DOM Video Object
The Video object in HTML DOM represents an <video> element. The video element can be accessed by using getElementById() method.
Syntax:
- To access a video object:
document.getElementById("videoId");
- where id is assigned to the <video> tag.
- To create a video object:
document.createElement("VIDEO");
Property Values:
| Value | Description |
|---|---|
| audioTracks | It returns an AudioTrackList object represents the available audio tracks. |
| autoplay | It is used to set or return if the video should start playing as soon as it is ready. |
| buffered | It returns the TimeRanges object that represents the buffered parts of a video. |
| controller | It returns the MediaController object that represents the current media controller of a video. |
| controls | It is used to set or returns whether a video should have play and pause controls are to be displayed. |
| crossOrigin | It sets or returns the CORS settings of a video. |
| currentSrc | It returns the URL of the current video. |
| currentTime | It set or return the current playback position in a video. |
| defaultMuted | It set or return whether the video should be muted by default. |
| defaultPlaybackRate | It set or return whether the default playback speed of the video. |
| duration | It returns the length of a video. |
| ended | It is used to return whether the playback of the video has ended. |
| error | It returns a MediaError object represents the error state of the video. |
| height | It is used to set or return the value of the height attribute of a video. |
| loop | It is used to set or return whether the video should start playing over again, every time it is finished |
| mediagroup/td> | It is used to set or return the name of the media group of that video. |
| muted | It is used to set or return whether the sound of the video should be turned off. |
| networkState | It returns the current network state of a video. |
| paused | It returns whether a video is paused or not. |
| playbackRate | It is used to set or return the speed of the video playback. |
| played | It returns a TimeRanges object represents the played parts of the video. |
| poster | It is used to set or return the value of the poster attribute of a video. |
| preload | It is used to set or return the value of the preload attribute of a video. |
| readyState | It is used to return the current ready state of a video. |
| seekable | It is used to return the TimeRanges object representing the seekable parts of a video. |
| seeking | It returns whether the user is currently seeking in the video. |
| src | It is used to set or return the value of the src attribute of a video. |
| startDate | It is used to set or return the value of the src attribute of a video. |
| textTracks | It is used to return the TextTrackList object representing the available text tracks. |
| videoTracks | It is used to return the VideoTrackList object representing the available video tracks. |
| volume | It is used to set or return the audio volume of a video. |
| width | It is used to set or return the value of the width attribute of a video. |
Video Object Methods:
- pause: It is used to pause the currently playing video.
- load: It is used to reloads the video element.
- play: It is used to start playing the video.
- addTextTrack: It is used to add a new text track to the video.
- canPlayType: It is used to check whether the browser can play the specified video type.
Example-1:
html
<!DOCTYPE html><html><head> <title> DOM Video Object </title></head><body> <center> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM Video Object</h2> <video id="gfg" width="320" height="240" controls> <source src= type="video/mp4"> </video> <br> <button type="button" onclick="geeks()"> Click </button> <p id="rk"></p> <script> function geeks() { // get the duration of video var r = document.getElementById( "gfg").duration; document.getElementById( "rk").innerHTML = r; } </script> </center></body></html> |
Output:
- Before Click on the button:
- After Click on the button:
Example-2:
html
<!DOCTYPE html><html><head> <title> DOM Video Object </title></head><body> <center> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM Video Object</h2> <video id="gfg" width="320" height="240" controls> <source src= type="video/mp4"> </video> <br> <button type="button" onclick="geeks()"> Click </button> <p id="rk"></p> <script> function geeks() { // Return width var r = document.getElementById( "gfg").width; document.getElementById( "rk").innerHTML = r; } </script> </center></body></html> |
Output:
- Before Click on the button:
- After Click on the button:
Supported Browsers: The browser supported by HTML | DOM Video Object are listed below:
- Google Chrome
- Edge
- Mozilla Firefox
- Opera
- Safari
Please Login to comment...