Как сделать функцию которая отключает/включает звук со всех видео в разных местах?

Question

[khalel2]

За все будет отвечать только одна кнопка, все видеоролики будут с одинаковым классом. Я попробовал, но отключает звук только с одного видео.

<video class="inst-video">
       <source src="preview1.mp4" type="video/mp4" />
</video>
<video class="inst-video">
       <source src="preview2.mp4" type="video/mp4" />
</video>
<video class="inst-video">
       <source src="preview3.mp4" type="video/mp4" />
</video>

<button onclick="enableMute()" id="toggleActionMute">MUTE</button>

var vid = document.getElementByClass("inst-video");
        function enableMute() { 
            vid.muted = true;
        }

Answer 1

[Сергей Соколов]

<button id="toggleActionMute">MUTE</button>

document.getElementById('toggleActionMute').addEventListener('click', () => {
  document.querySelectorAll('video.inst-video').forEach(video => {
    video.muted = true;
  });
});

Answer 2

[Okujava-script]

Если нужно, чтобы через один раз включался/выключался звук, то можно третью строку кода Сергея Соколова переписать так:

if(video.muted == true){ video.muted = false } else { video.muted = true };
 // или так:
video.muted = video.muted ? false : true;

Answer 3

[Даниил]

Предполагаю, нам нужен ваш код, это как минимум. А иначе вопрос выглядит как - "Сколько квадратов у меня в огороде". Сможете дать ответ? - нет, ведь не знаете ничего, ни ширины, ни длинны.

Comments

[khalel2]

<video class="inst-video">
       <source src="preview1.mp4" type="video/mp4" />
</video>
<video class="inst-video">
       <source src="preview2.mp4" type="video/mp4" />
</video>
<video class="inst-video">
       <source src="preview3.mp4" type="video/mp4" />
</video>

<button onclick="enableMute()" id="toggleActionMute">MUTE</button>

var vid = document.getElementByClass("inst-video");
        function enableMute() { 
            vid.muted = true;
        }

[Даниил]

khalel2, getElementByClassName возвращает массив. К вам вопрос. Если он возвращает массив, то сколько элементов массива вы указали?)

[Даниил]

Я бы в данном случае, использовал let vid = document.querySelectorAll(".inst-video");
PS: Не используйте устаревшее var

[Даниил]

khalel2, Заработало?

[khalel2]

ostup17, Забыл написать, попробовал. Что-то не работает :(

[Даниил]

khalel2,

<div class="wrp">
    <video class="inst-video">
      <source src="preview1.mp4" type="video/mp4" />
    </video>
    <video class="inst-video">
      <source src="preview2.mp4" type="video/mp4" />
    </video>
    <video class="inst-video">
      <source src="preview3.mp4" type="video/mp4" />
    </video>
  </div>

<button onclick="enableMute()" id="toggleActionMute">MUTE</button>
    <script>
      let wrp = document.querySelector(".wrp");
      let allVid = wrp.querySelectorAll("video");
      function enableMute() { 
            allVid.muted = true;
        }
        </script>

[ForSureN1]

ostup17, нельзя применять метод muted к массиву, но этот метод можно применить к элементу, поэтому отсюда вывод, что для начала нужно перебрать массив, а уж потом цеплять методы
да и вешать обработчик инлайном такой же старый способ как и var

[Даниил]

ForSureN1, Гм, буду знать. Никогда не сталкивался с этим методом

[ForSureN1]

ostup17, не имеет значения какой метод, querySelectorAll возвращает вам массив элементов, к массиву нельзя применять такие методы, которые нужно использовать для элементов массива, тоже самое если бы вы повешали обработчик на массив типа: allVid.addEventListener

[Алексей Дубровин]

ostup17, PS "var" никогда не был и не будет устаревшим
Вообще все что вы написали выше очень странно.
Тк как вся информация для решения была.

[ForSureN1]

Алексей Дубровин, а что собственно вы увидели в моих сообщениях странного?)