Audio (mute/unmute) control in HTML5 video player

Question

I'm using the following code to display video and audio files in HTML5 player:

<video id="myvideo" controls muted>
    <source src="path/to/video.mp4" type="video/mp4" />
    <audio id="myaudio" controls>
        <source src="path/to/audio.mp3" type="audio/mpeg"/>
    </audio>
</video>

<script>
var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
myvideo.onplay  = function() {myaudio.play(); myaudio.currentTime = myvideo.currentTime;}
myvideo.onpause = function() {myaudio.pause();}
</script>

The problem is that I can't get control on the volume controls (mute/unmute, volume up/down). It just doesn't work. Unfortunately I don't know the correct event name for it.

Could someone help me with that?

Thanks!

Answer 1

Muted doesn't have a simple event tied to it, what you would need to do is track the volumechange event and check the muted attribute

myvideo.onvolumechange = function() {
    if (myvideo.muted) {
        myaudio.pause();
    }
}

see https://www.w3.org/2010/05/video/mediaevents.html for a fairly extensive list of the events and attributes available for the standard <video> tag