Article Categories

Selected Reading

HTML DOM Video defaultMuted Property

HTML Web Development Front End Technology

The HTML DOM Video defaultMuted property sets or returns a boolean value that indicates whether the video's audio should be muted by default when the page loads. This property reflects the state of the HTML muted attribute and determines the initial mute state of the video element.

Note − This property only affects the default state when the video loads. It does not dynamically mute or unmute the video during playback. To control muting during playback, use the muted property instead.

Syntax

Following is the syntax for getting the defaultMuted property −

videoObject.defaultMuted

Following is the syntax for setting the defaultMuted property −

videoObject.defaultMuted = booleanValue

Parameters

The booleanValue can be one of the following −

Value	Description
`true`	The video will be muted by default when it loads
`false`	The video will not be muted by default when it loads

Return Value

The property returns a boolean value −

true − If the video is set to be muted by default
false − If the video is not set to be muted by default

Example

Following example demonstrates how to use the defaultMuted property to control the initial mute state of a video −

<!DOCTYPE html>
<html>
<head>
   <title>HTML DOM Video defaultMuted Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
   <h2>Video defaultMuted Property Demo</h2>
   
   <video id="myVideo" width="400" height="240" controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Your browser does not support the video tag.
   </video>
   
   <div style="margin: 20px;">
      <button onclick="setMuted(true)">Set Default Muted: True</button>
      <button onclick="setMuted(false)">Set Default Muted: False</button>
      <button onclick="checkStatus()">Check Status</button>
   </div>
   
   <p id="result">Click buttons to test the defaultMuted property</p>
   
   <script>
      var video = document.getElementById("myVideo");
      var result = document.getElementById("result");
      
      function setMuted(value) {
         video.defaultMuted = value;
         result.textContent = "defaultMuted set to: " + value;
      }
      
      function checkStatus() {
         result.textContent = "Current defaultMuted value: " + video.defaultMuted;
      }
   </script>
</body>
</html>

The output shows buttons to control and check the defaultMuted property state −

Video controls with three buttons below:
[Set Default Muted: True] [Set Default Muted: False] [Check Status]
Status message appears showing current defaultMuted value

Practical Example with HTML Attribute

Following example shows how the defaultMuted property corresponds to the HTML muted attribute −

<!DOCTYPE html>
<html>
<head>
   <title>defaultMuted vs muted Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h3>Video with muted attribute in HTML</h3>
   <video id="video1" width="300" height="200" controls muted>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
   </video>
   
   <h3>Video without muted attribute</h3>
   <video id="video2" width="300" height="200" controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
   </video>
   
   <div style="margin: 20px;">
      <button onclick="compareVideos()">Compare defaultMuted Values</button>
   </div>
   
   <p id="comparison"></p>
   
   <script>
      function compareVideos() {
         var video1 = document.getElementById("video1");
         var video2 = document.getElementById("video2");
         var comparison = document.getElementById("comparison");
         
         comparison.innerHTML = 
            "Video 1 (with muted attribute): " + video1.defaultMuted + "<br>" +
            "Video 2 (without muted attribute): " + video2.defaultMuted;
      }
   </script>
</body>
</html>

This example demonstrates that the video with the HTML muted attribute has defaultMuted = true, while the video without it has defaultMuted = false −

Video 1 (with muted attribute): true
Video 2 (without muted attribute): false

Key Points

The defaultMuted property corresponds to the HTML muted attribute on the video element
Setting defaultMuted = true is equivalent to adding the muted attribute to the HTML
This property only affects the initial state when the video loads, not the current playback state
Use the muted property (not defaultMuted) to dynamically control audio during playback
Both properties return boolean values: true for muted, false for not muted

Browser Compatibility

The defaultMuted property is supported in all modern browsers that support HTML5 video, including Chrome, Firefox, Safari, Edge, and Opera. It is part of the HTML5 specification and works consistently across platforms.

Conclusion

The defaultMuted property provides a way to programmatically control whether a video starts muted when the page loads. It reflects the HTML muted attribute and is useful for setting default audio behavior, particularly in scenarios where videos should start silently to improve user experience.

AmitDiwan

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

222 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next