Невозможно отключить элемент видео с помощью 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;

См. документы .

Теперь, в качестве отступления, если вы получаете элемент по id,Самый быстрый запрос DOM для этого .getElementById(), а не querySelector().Кроме того, вы можете изменить текущее состояние объекта DOM, открыв его свойства объекта, а не его атрибут HTML.Итак, окончательный код:

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";
}