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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            DOM Input 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>

    chevron_right

    
    

    Output:

    • Before Click on the button:
    • After Click on the button:

    Example-2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            DOM Input 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>

    chevron_right

    
    

    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


    My Personal Notes arrow_drop_up


    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



    Improved By : shubham_singh



    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.