html5视频的静音图标在Chrome或Safari上无法使用

Question

我遇到的问题是我不明白其来源： 我使用<video>标记在网站上播放视频。客户要求仅添加图标形状的“静音”按钮，该按钮在单击时会发生变化。

所以我试过这个： 这是我放在视频上的图标

<img src="mute0.png" id="mutebutton" onclick="javascript:muteUnmute()" />

这是javascript：

var mutebutton = document.getElementById('mutebutton');

function muteUnmute() {
    video.muted = !video.muted;
}
video.onvolumechange = function(e) {
    mutebutton.src = video.muted ? "mute1.png" : "mute0.png";
}

这适用于Firefox和Opera，但img src在Chrome或Safari中不会改变！

我也试过这个：

video.onvolumechange = function(e) {
    if (video.muted) {
        mutebutton.src = "mute1.png"
    } else {
        mutebutton.src = "mute0.png"
    }
}

但仍然没有结果。

有没有人知道为什么Chrome和Safari不允许我以这种方式更改img src？你能建议一种解决这个问题的方法吗？

谢谢！

修改

解决了！这可能对某人有用：

问题发生在video.onvolumechange事件上，似乎Chrome和Safari不明白

所以我已经完成了这项工作，现在可以了：

var mutebutton = document.getElementById('mutebutton');
function muteUnmute() {
    video.muted = !video.muted;
    mutebutton.src = video.muted ? "mute1.png" : "mute0.png";
}