静音/取消静音图标的背景视频

Question

我正在创建一个包含背景视频且具有静音/取消静音图标的页面。当我点击图标时，它会调用一个将视频静音/取消静音的功能，并使用javascript相应地更改图标，如下所示：

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

它工作正常，问题是在Firefox上如果你右键点击视频那里有一个静音/取消静音选项，如果用户点击它，它会使视频静音/取消静音，但图标赢了＆＃39;变了。是否有任何事件被触发，以便如果有人使用此选项，我可以实现一些将更改图标的代码？

感谢。

Answer 1

找到解决方案。 为volumechange事件创建一个事件监听器。

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