Javascript使用圖像靜音/取消靜音視頻

Question

由於某種原因，它無法正常工作。我在做什么錯？ 我希望能夠使用圖像使視頻靜音和取消靜音，而該圖像正在改變是否將視頻靜音。

  function mute() { var video = document.getElementById("bgvid"); if (!video.muted) { document.getElementById('muteicon').src = "Images/muteicon.png"; video.muted; } else { document.getElementById('muteicon').src = "Images/soundicon.png"; video.muted == false; } } 

 video#bgvid { margin-top: 30px; margin-bottom: 60px; width: 1280px; height: 720px; background-size: cover; } video { display: block; } 

 <video autoplay loop id="bgvid"> <source src="newyork.mp4" type="video/mp4"> </video> <br><br> <img alt="mute icon" src="Images/soundicon.png" id="muteicon" onclick="mute()"> <script> </script> 

Answer 1

您必須使用assign（ = ）運算符，而不是equals（ == ）運算符：

function mute() {
    var video = document.getElementById("bgvid");

    if (!video.muted) {
        document.getElementById('muteicon').src = "Images/muteicon.png";
        // video.muted <- not assigned to true
        video.muted = true;
    } else {
        document.getElementById('muteicon').src = "Images/soundicon.png";
        // video.muted == false <- wrong use of equality operator
        video.muted = false;
    }
}

而且，不能僅通過按如下方式調用API來告訴API將屬性設置為true ：

video.muted

您必須將屬性分配給一個值：

video.muted = true

Answer 2

當您嘗試使視頻靜音時，您沒有將muted屬性設置為true 。

if (!video.muted) {
    document.getElementById('muteicon').src = "Images/muteicon.png";
    video.muted = true; // you need to assign this value to true
} else { ... }