Article Categories

Selected Reading

HTML DOM Video Object

HTML Web Development Front End Technology

The HTML DOM Video Object represents the <video> element in the Document Object Model. It provides a JavaScript interface to control video playback, access video properties, and manage video-related events programmatically.

Creating a Video Object

You can access an existing video element or create a new one using JavaScript −

// Access existing video element
var videoObject = document.getElementById("myVideo");

// Create new video element
var videoObject = document.createElement("VIDEO");

Video Object Properties

The Video Object provides numerous properties to control and monitor video playback. Here are the key properties −

Property	Description
audioTracks	Returns an AudioTrackList object representing available audio tracks
autoplay	Sets/returns whether a video should start playing as soon as it is ready
buffered	Returns a TimeRanges object representing the buffered parts of a video
controls	Sets/returns whether a video should have controls displayed (play/pause etc)
currentSrc	Returns the URL of the current video
currentTime	Sets/returns the current playback position in a video (in seconds)
duration	Returns the length of a video (in seconds)
ended	Returns whether the playback of the video has ended
loop	Sets/returns whether the video should start playing over again when finished
muted	Sets/returns whether the sound of a video should be turned off
networkState	Returns the current network state of a video
paused	Returns whether a video is paused or not
playbackRate	Sets/returns the speed of the video playback
poster	Sets/returns the value of the poster attribute of a video
readyState	Returns the current ready state of a video
src	Sets/returns the value of the src attribute of a video
volume	Sets/returns the audio volume of a video (0.0 to 1.0)
width	Sets/returns the value of the width attribute of a video
height	Sets/returns the value of the height attribute of a video

Video Object Methods

The Video Object also provides methods to control video playback −

Method	Description
addTextTrack()	Adds a new text track to the video
canPlayType()	Checks whether the browser can play the specified video type or not
load()	Re-loads the video element
play()	Starts playback of the video
pause()	Pauses a playing video

Example − Video networkState Property

The networkState property returns the current network state of the video element. Let us see how to access this property −

<!DOCTYPE html>
<html>
<head>
   <title>HTML DOM Video networkState</title>
   <style>
      body { font-family: Arial, sans-serif; padding: 20px; }
      .container { text-align: center; max-width: 600px; margin: 0 auto; }
      video { margin: 10px 0; }
      button { padding: 10px; margin: 5px; border-radius: 5px; }
      #result { margin-top: 15px; font-weight: bold; }
   </style>
</head>
<body>
   <div class="container">
      <h2>Video networkState Demo</h2>
      <video id="myVideo" width="320" controls>
         <source src="sample-video.mp4" type="video/mp4">
         Your browser does not support the video tag.
      </video><br>
      <button onclick="getNetworkState()">Get Network State</button>
      <button onclick="loadVideo()">Load Video</button>
      <div id="result"></div>
   </div>

   <script>
      var video = document.getElementById("myVideo");
      var result = document.getElementById("result");

      function getNetworkState() {
         var state = video.networkState;
         var stateText = "";
         
         switch(state) {
            case 0: stateText = "NETWORK_EMPTY - No data"; break;
            case 1: stateText = "NETWORK_IDLE - Idle"; break;
            case 2: stateText = "NETWORK_LOADING - Loading"; break;
            case 3: stateText = "NETWORK_NO_SOURCE - No source"; break;
         }
         
         result.textContent = "Network State: " + state + " (" + stateText + ")";
      }

      function loadVideo() {
         video.load();
         result.textContent = "Video reloaded";
      }
   </script>
</body>
</html>

The output displays different network states based on the video loading status −

Network State: 0 (NETWORK_EMPTY - No data)
Network State: 2 (NETWORK_LOADING - Loading)  
Network State: 1 (NETWORK_IDLE - Idle)

Example − Video canPlayType() Method

The canPlayType() method checks if the browser can play a specific video format −

<!DOCTYPE html>
<html>
<head>
   <title>HTML DOM Video canPlayType()</title>
   <style>
      body { font-family: Arial, sans-serif; padding: 20px; }
      .container { text-align: center; max-width: 600px; margin: 0 auto; }
      button { padding: 10px; margin: 5px; border-radius: 5px; }
      #result { margin-top: 15px; }
      .format { margin: 10px 0; }
   </style>
</head>
<body>
   <div class="container">
      <h2>Video Format Support Check</h2>
      <video id="testVideo" width="320" controls>
         Your browser does not support the video tag.
      </video><br>
      <button onclick="checkFormats()">Check Video Format Support</button>
      <div id="result"></div>
   </div>

   <script>
      var video = document.getElementById("testVideo");
      var result = document.getElementById("result");

      function checkFormats() {
         var formats = [
            'video/mp4',
            'video/webm', 
            'video/ogg',
            'video/avi'
         ];
         
         var output = "<h3>Format Support Results:</h3>";
         
         formats.forEach(function(format) {
            var canPlay = video.canPlayType(format);
            var support = "";
            
            if (canPlay === "probably") {
               support = "Fully Supported";
            } else if (canPlay === "maybe") {
               support = "Maybe Supported";
            } else {
               support = "Not Supported";
            }
            
            output += "<div class='format'>" + format + ": " + support + "</div>";
         });
         
         result.innerHTML = output;
      }
   </script>
</body>
</html>

The output shows browser support for different video formats −

Format Support Results:
video/mp4: Fully Supported
video/webm: Fully Supported  
video/ogg: Maybe Supported
video/avi: Not Supported

Example − Video Playback Control

Following example demonstrates basic video playback control using Video Object methods −

<!DOCTYPE html>
<html>
<head>
   <title>Video Playback Control</title>
   <style>
      body { font-family: Arial, sans-serif; padding: 20px; }
      .container { text-align: center; max-width: 600px; margin: 0 auto; }
      .controls { margin: 15px 0; }
      button { padding: 8px 15px; margin: 5px; border-radius: 5px; }
      .info { margin-top: 10px; font-size: 14px; }
   </style>
</head>
<body>
   <div class="container">
      <h2>Custom Video Controls</h2>
      <video id="controlVideo" width="400" muted>
         <source src="sample-video.mp4" type="video/mp4">
         Your browser does not support the video tag.
      </video>
      
      <div class="controls">
         <button onclick="playVideo()">Play</button>
         <button onclick="pauseVideo()">Pause</button>
         <button onclick="muteVideo()">Mute/Unmute</button>
         <button onclick="changeSpeed()">Change Speed</button>
      </div>
      
      <div class="info" id="videoInfo"></div>
   </div>

   <script>
      var video = document.getElementById("controlVideo");
      var info = document.getElementById("videoInfo");

      function playVideo() {
         video.play();
         updateInfo();
      }

      function pauseVideo() {
         video.pause();
         updateInfo();
      }

      function muteVideo() {
         video.muted = !video.muted;
         updateInfo();
      }

      function changeSpeed() {
         if (video.playbackRate === 1) {
            video.playbackRate = 1.5;
         } else if (video.playbackRate === 1.5) {
            video.playbackRate = 0.5;
         } else {
            video.playbackRate = 1;
         }
         updateInfo();
      }

      function updateInfo() {
         info.innerHTML = 
            "Status: " + (video.paused ? "Paused" : "Playing") + 
            " | Muted: " + video.muted + 
            " | Speed: " + video.playbackRate + "x" +
            " | Volume: " + Math.round(video.volume * 100) + "%";
      }

      // Update info initially
      video.addEventListener('loadedmetadata', updateInfo);
   </script>
</body>
</html>

The custom controls allow you to play, pause, mute, and change the playback speed of the video while displaying current status information.

Conclusion

The HTML DOM Video Object provides comprehensive control over video elements through JavaScript. It offers properties to monitor video state and methods to control playback, making it essential for creating custom video players and interactive video applications. Understanding these properties and methods enables developers to build rich multimedia experiences in web applications.

AmitDiwan

Updated on: 2026-03-16T21:38:54+05:30

348 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next