javascript - html5ビデオのミュートアイコンはChromeまたはSafariでは機能しません

Question

起源がわからない問題に直面しています<video>。タグを使用してWebサイトでビデオを再生しています。クライアントは、クリックすると変化するアイコンの形をした「ミュート」ボタンのみを追加するように要求しました。

だから私はこれを試しました：これは私がビデオの上に置くアイコンです

<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で正常に機能しますが、ChromeまたはSafariではimgsrcは変更されません。

私もこれを試しました：

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

しかし、それでも結果はありません。

ChromeとSafariでimgsrcをこのように変更できない理由を誰かが知っていますか？この問題を解決する方法を提案できますか？

ありがとうございました！

編集：

解決しました！これは誰かに役立つかもしれません：

問題はvideo.onvolumechangeイベントにありました、ChromeとSafariはそれを理解していないようです

だから私はこれを行いました、そしてそれは今うまくいきます：

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