2

我遇到了一个我不明白其起源的问题:我有一个使用<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";
}
4

0 回答 0