Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Video muted Property
The HTML DOM Video muted property controls whether the video's audio is silenced. This property returns a boolean value indicating the current mute state and allows you to programmatically mute or unmute video elements.
Syntax
Following is the syntax for getting the muted property −
videoObject.muted
Following is the syntax for setting the muted property −
videoObject.muted = booleanValue
Parameters
The booleanValue can be one of the following values −
| Value | Description |
|---|---|
true |
The video audio is muted (no sound will play) |
false |
The video audio is not muted (sound will play normally) |
Return Value
The property returns a boolean value −
-
trueif the video is currently muted -
falseif the video is not muted
Example − Toggle Video Mute State
Following example demonstrates how to use the muted property to control video audio based on different scenarios −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video muted Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video Muted Property Demo</h2>
<video id="myVideo" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="muteVideo()">Mute Video</button>
<button onclick="unmuteVideo()">Unmute Video</button>
<button onclick="toggleMute()">Toggle Mute</button>
<button onclick="checkMuteStatus()">Check Status</button>
<p id="status">Click a button to control audio</p>
<script>
var video = document.getElementById("myVideo");
var status = document.getElementById("status");
function muteVideo() {
video.muted = true;
status.textContent = "Video is now muted";
}
function unmuteVideo() {
video.muted = false;
status.textContent = "Video is now unmuted";
}
function toggleMute() {
video.muted = !video.muted;
status.textContent = video.muted ? "Video muted" : "Video unmuted";
}
function checkMuteStatus() {
status.textContent = "Current mute status: " + (video.muted ? "Muted" : "Not muted");
}
</script>
</body>
</html>
The output shows a video player with control buttons. Each button demonstrates different ways to interact with the muted property −
[Video Player with controls] [Mute Video] [Unmute Video] [Toggle Mute] [Check Status] Current mute status: Not muted
Example − Automatic Mute Based on Time
Following example shows how to automatically control video mute state based on different conditions −
<!DOCTYPE html>
<html>
<head>
<title>Auto Mute Video Demo</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Smart Video Mute Control</h2>
<video id="smartVideo" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="setDayMode()">Day Mode (Unmuted)</button>
<button onclick="setNightMode()">Night Mode (Muted)</button>
<button onclick="setOfficeMode()">Office Mode (Auto Mute)</button>
<div id="modeDisplay" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0; border-radius: 5px;">
Click a mode to see the mute behavior
</div>
<script>
var video = document.getElementById("smartVideo");
var display = document.getElementById("modeDisplay");
function setDayMode() {
video.muted = false;
display.innerHTML = "<strong>Day Mode:</strong> Video audio is enabled. Enjoy your content with sound!";
display.style.backgroundColor = "#e8f5e8";
}
function setNightMode() {
video.muted = true;
display.innerHTML = "<strong>Night Mode:</strong> Video is muted to avoid disturbing others during quiet hours.";
display.style.backgroundColor = "#e8e8f5";
}
function setOfficeMode() {
video.muted = true;
display.innerHTML = "<strong>Office Mode:</strong> Video automatically muted for professional environment.";
display.style.backgroundColor = "#f5f0e8";
}
</script>
</body>
</html>
This example demonstrates practical use cases where the muted property adapts to different environments or user preferences.
Example − Mute Status Indicator
Following example shows how to create a visual indicator that reflects the current mute state −
<!DOCTYPE html>
<html>
<head>
<title>Video Mute Indicator</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Mute Indicator</h2>
<div style="position: relative; display: inline-block;">
<video id="indicatorVideo" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="muteIndicator" style="position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 15px; font-size: 12px;">
? Unmuted
</div>
</div>
<br><br>
<button onclick="toggleVideoMute()">Toggle Mute</button>
<script>
var video = document.getElementById("indicatorVideo");
var indicator = document.getElementById("muteIndicator");
function updateIndicator() {
if (video.muted) {
indicator.innerHTML = "? Muted";
indicator.style.background = "rgba(255,0,0,0.7)";
} else {
indicator.innerHTML = "? Unmuted";
indicator.style.background = "rgba(0,128,0,0.7)";
}
}
function toggleVideoMute() {
video.muted = !video.muted;
updateIndicator();
}
// Update indicator when video mute state changes
video.addEventListener('volumechange', updateIndicator);
</script>
</body>
</html>
This example creates a visual overlay that shows the current mute status and updates automatically when the mute state changes.
Key Points
- The
mutedproperty only affects audio playback, not video display - Setting
muted = trueis equivalent to clicking the mute button in the video controls - The property is independent of the volume level − a muted video can still have volume set to maximum
- The
volumechangeevent fires when the muted state changes - The muted property persists until explicitly changed or the page is reloaded
Browser Compatibility
The Video muted 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 has wide compatibility across desktop and mobile browsers.
Conclusion
The HTML DOM Video muted property provides an essential way to control video audio programmatically. It returns a boolean value indicating whether the video is muted and allows you to set the mute state dynamically. This property is particularly useful for creating adaptive user experiences, implementing accessibility features, and building smart video controls that respond to different contexts or user preferences.
290 Views
