â ī¸ Warning â ī¸ Deprecated Code! This video tutorial contains outdated code.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
Video Volume Change and Mute Programming Tutorial
Welcome to part 4 of customizing the HTML video controls. In this lesson we will focus on programming volume controls into our custom video player using JavaScript. We are going to add a mute button and volume slider control by accessing the "muted" and "volume" properties of the video object in JavaScript.
<!DOCTYPE html>
<html>
<head>
<style>
div#video_player_box{ width:550px; background:#000; margin:0px auto;}
div#video_controls_bar{ background: #333; padding:10px; color:#CCC;}
input#seekslider{ width:180px; }
input#volumeslider{ width: 80px;}
</style>
<script>
var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider;
function intializePlayer(){
// Set object references
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
mutebtn = document.getElementById("mutebtn");
volumeslider = document.getElementById("volumeslider");
// Add event listeners
playbtn.addEventListener("click",playPause,false);
seekslider.addEventListener("change",vidSeek,false);
vid.addEventListener("timeupdate",seektimeupdate,false);
mutebtn.addEventListener("click",vidmute,false);
volumeslider.addEventListener("change",setvolume,false);
}
window.onload = intializePlayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.innerHTML = "Pause";
} else {
vid.pause();
playbtn.innerHTML = "Play";
}
}
function vidSeek(){
var seekto = vid.duration * (seekslider.value / 100);
vid.currentTime = seekto;
}
function seektimeupdate(){
var nt = vid.currentTime * (100 / vid.duration);
seekslider.value = nt;
var curmins = Math.floor(vid.currentTime / 60);
var cursecs = Math.floor(vid.currentTime - curmins * 60);
var durmins = Math.floor(vid.duration / 60);
var dursecs = Math.floor(vid.duration - durmins * 60);
if(cursecs < 10){ cursecs = "0"+cursecs; }
if(dursecs < 10){ dursecs = "0"+dursecs; }
if(curmins < 10){ curmins = "0"+curmins; }
if(durmins < 10){ durmins = "0"+durmins; }
curtimetext.innerHTML = curmins+":"+cursecs;
durtimetext.innerHTML = durmins+":"+dursecs;
}
function vidmute(){
if(vid.muted){
vid.muted = false;
mutebtn.innerHTML = "Mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
function setvolume(){
vid.volume = volumeslider.value / 100;
}
</script>
</head>
<body>
<div id="video_player_box">
<video id="my_video" width="550" height="310" autoplay>
<source src="Tom_and_Jerry.mp4">
</video>
<div id="video_controls_bar">
<button id="playpausebtn">Pause</button>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<span id="curtimetext">00:00</span> / <span id="durtimetext">00:00</span>
<button id="mutebtn">Mute</button>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
</div>
</div>
</body>
</html>