Mute/Unmute icon for background video

Question

I'm creating a page that has a background video an it has a mute/unmute icon. When I click the icon it calls a function that mutes/unmutes the video and change the icon accordingly using javascript as can be seen below:

function muteVideo(){
    document.getElementById('bgvid').muted = !document.getElementById('bgvid').muted;
    document.getElementById('soundIcon').src = (document.getElementById('bgvid').muted ? 'mute.png' : 'sound.png');
}

It works fine, the problem is that on firefox if you right click the video there's a mute/unmute option, and if the user clicks it, it will mute/unmute the video but the icon won't get changed. Is there any event that gets fired so that if someone uses this option I can implement some code that will change the icon?

Thanks.

Answer 1

Found the solution. Create an event listener for the volumechange event.

document.getElementById('bgvid').addEventListener("volumechange", function(){
    document.getElementById('soundIcon').src = (document.getElementById('bgvid').muted ? 'mute.png' : 'sound.png');
});