W3Context Online Editor v1.1

<!DOCTYPE html>
<html>
<head>
    <title>HTML onvolumechange attribute example</title>
</head>
<body>
    <h3>HTML onvolumechange attribute example</h3>
    <p>onvolumechange event fires whenever the volume of a media element (audio or video) is changed.</p>
    <p id="output">Playing position:</p>
    
    <video controls onvolumechange="volumeChange(event)" ontimeupdate="myFunction(event)"  id="sample">
        <source src="video-source-path.mp4" type="video/mp4">
        This browser does not support the video tag.
    </video>
    <script>
        //In javascript
        //document.getElementById("sample").onvolumechange=function() {myFunction();};
        //OR
        //document.getElementById("sample").addEventListener("volumechange", myFunction);
        function myFunction() {
  			var video = document.getElementById("sample");
  			var time = video.currentTime;
            var soundStatus="";
            if(video.muted){
               soundStatus="Muted"
            }else(
               soundStatus="Unmuted"
            )
  			document.getElementById("output").innerHTML = "Playing position: "+time.toFixed(2) +" and Volume: "+video.volume*100+"% "+" Sound Status: "+soundStatus;
        }
        function volumeChange() {
            alert("The volume has been changed.");
		}        
    </script>
</body>
</html>