起源がわからない問題に直面しています<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";
}