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=
"https://media.geeksforgeeks.org/wp-content/uploads/project.mp4" 
                    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:

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=
"https://media.geeksforgeeks.org/wp-content/uploads/project.mp4" 
                    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:

Supported Browsers: The browser supported by HTML DOM Video Object are listed below:

Google Chrome
Edge
Mozilla Firefox
Opera
Safari

Explore