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 volume Property
The HTML DOM Video volume property sets or retrieves the audio volume level of a video element. The volume is represented as a decimal number between 0.0 (muted) and 1.0 (maximum volume).
Syntax
Following is the syntax for returning the current volume −
mediaObject.volume
Following is the syntax for setting the volume to a specific level −
mediaObject.volume = number
Parameters
The number parameter accepts a decimal value with the following constraints −
Maximum value − 1.0 (full volume)
Minimum value − 0.0 (muted/silent)
Default value − 1.0
Values outside the 0.0-1.0 range are automatically clamped to the nearest valid value
Return Value
The property returns a number representing the current volume level as a decimal between 0.0 and 1.0.
Example − Volume Control with Buttons
Following example demonstrates how to control video volume using JavaScript buttons −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video Volume Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Video Volume Control</h2>
<video id="myVideo" width="320" 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>
<br><br>
<button onclick="decreaseVolume()">Volume Down (-)</button>
<button onclick="increaseVolume()">Volume Up (+)</button>
<button onclick="muteVideo()">Mute/Unmute</button>
<div id="volumeDisplay" style="margin-top: 10px; font-weight: bold;"></div>
<script>
var video = document.getElementById("myVideo");
var display = document.getElementById("volumeDisplay");
var isMuted = false;
var previousVolume = 1.0;
function updateDisplay() {
display.textContent = "Current Volume: " + video.volume.toFixed(1);
}
function decreaseVolume() {
if (video.volume > 0.1) {
video.volume -= 0.1;
} else {
video.volume = 0.0;
}
updateDisplay();
}
function increaseVolume() {
if (video.volume < 0.9) {
video.volume += 0.1;
} else {
video.volume = 1.0;
}
updateDisplay();
}
function muteVideo() {
if (isMuted) {
video.volume = previousVolume;
isMuted = false;
} else {
previousVolume = video.volume;
video.volume = 0.0;
isMuted = true;
}
updateDisplay();
}
// Initialize display
updateDisplay();
</script>
</body>
</html>
The example provides three buttons to decrease volume, increase volume, and toggle mute. The current volume level is displayed and updated in real-time.
Example − Volume Slider Control
Following example shows a more user-friendly volume control using a range slider −
<!DOCTYPE html>
<html>
<head>
<title>Video Volume Slider</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Video with Volume Slider</h2>
<video id="videoPlayer" width="320" 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-top: 15px;">
<label for="volumeSlider">Volume: </label>
<input type="range" id="volumeSlider" min="0" max="100" value="100" style="width: 200px;">
<span id="volumeValue">100%</span>
</div>
<script>
var video = document.getElementById("videoPlayer");
var slider = document.getElementById("volumeSlider");
var valueDisplay = document.getElementById("volumeValue");
slider.addEventListener("input", function() {
var volumeLevel = slider.value / 100;
video.volume = volumeLevel;
valueDisplay.textContent = slider.value + "%";
});
// Update slider when video volume changes externally
video.addEventListener("volumechange", function() {
slider.value = Math.round(video.volume * 100);
valueDisplay.textContent = slider.value + "%";
});
</script>
</body>
</html>
This example provides a smooth volume control experience with a range slider that converts percentage values (0-100%) to the required decimal format (0.0-1.0) for the volume property.
Key Points
The volume property accepts values from 0.0 (silent) to 1.0 (full volume)
Values outside this range are automatically clamped to valid bounds
The default volume level is 1.0 (maximum volume)
Setting volume to 0.0 effectively mutes the video
The
volumechangeevent is fired when the volume changesVolume control is separate from the
mutedproperty
Conclusion
The HTML DOM Video volume property provides programmatic control over video audio levels using decimal values between 0.0 and 1.0. It can be combined with user interface elements like buttons or sliders to create custom volume controls for video players.
153 Views
