Javascript DOM Form Input Range control video volume

Description

Javascript DOM Form Input Range control video volume

View in separate window 

<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <div> 
        <button id="playbackController">Play</button> 
        <button id="muteController">Mute</button> 
        <input type="range" id="volumeController" 
               min="0" max="1" step=".1" value="1"/> 
    </div> 
    <video id="bbbVideo"> 
        <source src="video.mp4" /> 
        <source src="video.webm" /> 
    </video> 

    <script> 
        function pauseHandler(e) { 
            playButton.innerHTML = "Resume"; 
        } //  w ww . j  a va 2 s.  c om

        function playingHandler(e) { 
            playButton.innerHTML = "Pause"; 
        } 

        function volumechangeHandler(e) { 
            muteButton.innerHTML = video.muted ? "Unmute"  : "Mute"; 
        } 

        function playbackClick(e) { 
            video.paused ? video.play()  : video.pause(); 
        } 

        function muteClick(e) { 
            video.muted =  !video.muted; 
        } 

        function volumeInput(e) { 
            video.volume = volumeSlider.value; 
        } 

        let video = document.getElementById("bbbVideo"); 
        let playButton = document.getElementById("playbackController"); 
        let muteButton = document.getElementById("muteController"); 
        let volumeSlider = document.getElementById("volumeController"); 

        video.addEventListener("pause", pauseHandler); 
        video.addEventListener("playing", playingHandler); 
        video.addEventListener("volumechange", volumechangeHandler); 

        playButton.addEventListener("click", playbackClick); 
        muteButton.addEventListener("click", muteClick); 
        volumeSlider.addEventListener("input", volumeInput); 
    </script> 
</body> 
</html>



PreviousNext

Related