Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Video Object

  • Last Updated : 05 Aug, 2019

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:

    ValueDescription
    audioTracksIt returns an AudioTrackList object represents the available audio tracks.
    autoplayIt is used to set or return if the video should start playing as soon as it is ready.
    bufferedIt returns the TimeRanges object that represents the buffered parts of a video.
    controllerIt returns the MediaController object that represents the current media controller of a video.
    controlsIt is used to set or returns whether a video should have play and pause controls are to be displayed.
    crossOriginIt sets or returns the CORS settings of a video.
    currentSrcIt returns the URL of the current video.
    currentTimeIt set or return the current playback position in a video.
    defaultMutedIt set or return whether the video should be muted by default.
    defaultPlaybackRateIt set or return whether the default playback speed of the video.
    durationIt returns the length of a video.
    endedIt is used to return whether the playback of the video has ended.
    errorIt returns a MediaError object represents the error state of the video.
    heightIt is used to set or return the value of the height attribute of a video.
    loopIt 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.
    mutedIt is used to set or return whether the sound of the video should be turned off.
    networkStateIt returns the current network state of a video.
    pausedIt returns whether a video is paused or not.
    playbackRateIt is used to set or return the speed of the video playback.
    playedIt returns a TimeRanges object represents the played parts of the video.
    posterIt is used to set or return the value of the poster attribute of a video.
    preloadIt is used to set or return the value of the preload attribute of a video.
    readyStateIt is used to return the current ready state of a video.
    seekableIt is used to return the TimeRanges object representing the seekable parts of a video.
    seekingIt returns whether the user is currently seeking in the video.
    srcIt is used to set or return the value of the src attribute of a video.
    startDateIt is used to set or return the value of the src attribute of a video.
    textTracksIt is used to return the TextTrackList object representing the available text tracks.
    videoTracksIt is used to return the VideoTrackList object representing the available video tracks.
    volumeIt is used to set or return the audio volume of a video.
    widthIt 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:




    <!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>

    Output:

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

    Example-2:




    <!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>

    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

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :