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
How to set the audio output of the video to mute in HTML?
Use the muted attribute to set the audio output of the video to mute in HTML. The muted attribute is a boolean attribute that specifies whether the video's audio should be initially silenced when the page loads.
Syntax
Following is the syntax for the muted attribute −
<video muted> <source src="video.mp4" type="video/mp4"> </video>
The muted attribute can be written in three ways −
-
muted− Boolean attribute (recommended) -
muted="muted"− Explicit value -
muted=""− Empty value
How It Works
When the muted attribute is present, the video element will start playing with the audio muted by default. Users can still unmute the video by clicking the volume control in the video player interface. The attribute only affects the initial state of the video when the page loads.
This attribute is particularly useful for autoplay videos, as many browsers require videos to be muted for autoplay to work properly due to user experience policies.
Example − Basic Muted Video
Following example demonstrates how to create a muted video element −
<!DOCTYPE html>
<html>
<head>
<title>Muted Video Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Muted Video Player</h2>
<video width="400" height="300" controls muted>
<source src="/html5/sample.mp4" type="video/mp4">
<source src="/html5/sample.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p>This video starts muted. Click the volume icon to unmute.</p>
</body>
</html>
The video loads with audio muted, and users can unmute it using the volume control in the player interface.
Example − Muted Autoplay Video
Following example shows how to combine muted with autoplay for videos that start playing automatically −
<!DOCTYPE html>
<html>
<head>
<title>Muted Autoplay Video</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Auto-playing Muted Video</h2>
<video width="400" height="300" controls autoplay muted loop>
<source src="/html5/demo.mp4" type="video/mp4">
<source src="/html5/demo.webm" type="video/webm">
Your browser does not support the video element.
</video>
<p>This video auto-plays in muted mode and loops continuously.</p>
</body>
</html>
The video automatically starts playing when the page loads, but without sound. The loop attribute makes it play continuously.
Controlling Muted State with JavaScript
You can also control the muted state programmatically using JavaScript. The video element has a muted property that can be read and modified.
Example
<!DOCTYPE html>
<html>
<head>
<title>Control Muted State with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>JavaScript Mute Control</h2>
<video id="myVideo" width="400" height="300" controls>
<source src="/html5/sample.mp4" type="video/mp4">
<source src="/html5/sample.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<br><br>
<button onclick="muteVideo()">Mute Video</button>
<button onclick="unmuteVideo()">Unmute Video</button>
<button onclick="toggleMute()">Toggle Mute</button>
<p id="status">Video is currently unmuted.</p>
<script>
function muteVideo() {
document.getElementById("myVideo").muted = true;
document.getElementById("status").textContent = "Video is currently muted.";
}
function unmuteVideo() {
document.getElementById("myVideo").muted = false;
document.getElementById("status").textContent = "Video is currently unmuted.";
}
function toggleMute() {
var video = document.getElementById("myVideo");
video.muted = !video.muted;
document.getElementById("status").textContent =
video.muted ? "Video is currently muted." : "Video is currently unmuted.";
}
</script>
</body>
</html>
The buttons allow you to programmatically control the muted state of the video, and the status text updates to reflect the current state.
[Mute Video] [Unmute Video] [Toggle Mute] Video is currently unmuted.
Key Points
- The
mutedattribute only affects the initial state when the page loads - Users can still manually unmute the video using player controls
- Essential for autoplay functionality in modern browsers
- Can be controlled dynamically with JavaScript using the
mutedproperty - Works with all major video formats (MP4, WebM, OGG)
Browser Compatibility
The muted attribute is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It is part of the HTML5 specification and works consistently across different platforms.
Conclusion
The muted attribute provides a simple way to ensure videos start without audio, improving user experience and enabling autoplay functionality. It can be combined with other video attributes and controlled programmatically with JavaScript for dynamic audio management.
486 Views
