使用图像的 Javascript 静音/取消静音视频

Posted 2023-05-08

【中文标题】使用图像的 Javascript 静音/取消静音视频

【英文标题】：Javascript mute/unmute video using image

【发布时间】：2015-07-23 21:26:30

【问题描述】：

由于某种原因，它只是不起作用..我做错了什么？ 我希望能够使用图像将视频静音和取消静音，这会改变视频是否静音。

 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  src="Images/soundicon.png" id="muteicon" onclick="mute()">
    <script>
      </script>

【参考方案1】：

您必须使用assign(=) 运算符而不是equality(==) 运算符：

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 将属性设置为 true 只是通过调用它：

video.muted

您必须将属性分配给一个值：

video.muted = true

【参考方案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  ...