HTML5 Video Volume Controller in JavaScript with Slider
By Saruque Ahamed MollickIn this post, I am going to show you a very easy and effective method to create HTML5 Video volume controller in JavaScript with a slider. Using this JavaScript code you can control volume with slider.
HTML5 Video/Audio player Volume Control With Key in JavaScript
Moreover, you can control the steps of volume increment or decrement using this JavaScript code.
So, here we gonna create these things one by one.
- Place a video in a <video> tag.
- Create an input field with type range.
- Create a play pause button which is optional for this tutorial,
But still, if you want, go through Play and pause HTML5 video by pressing space key in JavaScript
or Play/Pause Button For HTML5 Video Using JavaScript - Create a JavaScript function to take input value from the range input field as volume value.
Just follow the below steps to understand how to do this.
Create a video volume controller in JavaScript with slider
Main JavaScript Function:
function thisVolume(volume_value)
{
var myvideo = document.getElementById("myvid");
document.getElementById("vol").innerHTML=volume_value;
myvideo.volume = volume_value / 100;
}Now carefully look at the full HTML + JavaScript code
<!DOCTYPE html>
<html>
<head>
<title>Play/Pause button with volume slider for HTML5 video using JavaScript</title>
</head>
<body>
<div style="text-align:center">
<br><br>
<video id="myvid" width="420" src="filename.mp4" type="video/mp4"> </video>
<button id="vidbutton">Play</button>
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="thisVolume(this.value)" onchange="thisVolume(this.value)"></input>
<div id="vol"></div>
</div>
<script>
var ppbutton = document.getElementById("vidbutton");
ppbutton.addEventListener("click", playPause);
myVideo = document.getElementById("myvid");
function playPause() {
if (myVideo.paused) {
myVideo.play();
ppbutton.innerHTML = "Pause";
}
else {
myVideo.pause();
ppbutton.innerHTML = "Play";
}
}
function thisVolume(volume_value)
{
var myvideo = document.getElementById("myvid");
document.getElementById("vol").innerHTML=volume_value;
myvideo.volume = volume_value / 100;
}
</script>
</body>
</html>You might be also interested in,
Forward and backward HTML5 video player with left and right arrow key in JavaScript
Play/Pause Button For HTML5 Video Using JavaScript
Explanation:
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="thisVolume(this.value)" onchange="thisVolume(this.value)"></input>
This is the input field for the slider.
function thisVolume(volume_value) {
var myvideo = document.getElementById("myvid");
document.getElementById("vol").innerHTML=volume_value;
myvideo.volume = volume_value / 100;
}and this is the main JavaScript function which is taking value from the slider input.
The value is getting stored in the variable volume_value
document.getElementById(“vol”).innerHTML=volume_value; // this line is just to show the current volume value in terms of zero to hundred.
HTML5 Video/Audio player Volume Control With Key in JavaScript
Thank you for making volume slider.
I tried to write a code to control, but I’m failed.
Since I found your web site to work with.