Open In App

HTML DOM Video Object

Improve
Improve
Like Article
Like
Save
Share
Report

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:

video1

HTML DOM video

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: 

video2

HTML DOM video

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

  • Google Chrome
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari


Last Updated : 07 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads