无法使用 JavaScript 使视频元素静音

Question

let muteBtn = document.querySelector('#mute');
muteBtn.addEventListener('click',muteVideo);
function muteVideo(){
    if (this.getAttribute('src') == "mute.png") {
        video.muted() == false;
        this.setAttribute('src', 'mute.png');
    } else {
        video.muted() == true;
        this.setAttribute('src', 'mute.png');
    }
}

用于静音视频的 Javascript 代码。做不出来

Answer 1

你有两个问题：

1. .muted 是一个属性，而不是一个方法。后面不应该有() 属性名称。
2. 此外，您使用单个 = 来分配值，而不是 ==。

===========

video.muted = false;
video.muted = true;

请参阅docs。

现在，顺便说一句，如果您通过 id 获取元素，那么最快的 DOM 查询是 .getElementById()，而不是 querySelector()。此外，您可以通过访问其对象属性而不是其 HTML 属性来更改 DOM 对象的当前状态。所以，最终的代码是：

let muteBtn = document.getElementById('mute');

muteBtn.addEventListener('click',muteVideo);

function muteVideo(){
    if (this.src == "mute.png") {
        video.muted = false;
        this.src = 'unmute.png';
    } else {
        video.muted = true;
        this.src = 'mute.png;
    }
}

说了这么多，将muted设置为与当前相反的值，然后根据当前的muted值设置图像会简单得多：

document.getElementById('mute').addEventListener('click', function(){
    video.muted = !video.muted; // Switch mute to the opposite of what it is

    // Use a ternary "if" condition to set the image one way or the other:
    this.src = (video.muted) ? "mute.jpg" : "unmute.jpg";
}