Галерея видео, тег video, как отрегулировать звук только для одного?

Question

[alexiusgrey]

Есть галерея из video, то есть именно тег video, не iframe.
Поставлено autoplay muted для красоты. Да, на производительность все равно.
Сontrols нужны, чтобы можно было включать звук и разворачивать фуллскрин.

Но клиенту не нравится, что можно включить звук сразу двум видео из галереи и они друг на друга накладываются.
У меня вообще нет идей как это пофиксить. как можно сделать, чтоб звук одного видео выключался, если включался на втором?
Может как-то js-ом? Из библиотек стоит jquery, способы для реакта или вью не подойдут

Comments

[Владимир Василенко]

Думаю вам могут помочь эти примеры:
Как программно изменить громкость
https://www.w3schools.com/tags/av_prop_volume.asp
Как обработать событие изменения громкости пользователем
https://www.w3schools.com/tags/av_event_volumechan...
---
Ну и все остальные методы, свойства, события для тега video
https://www.w3schools.com/tags/ref_av_dom.asp

[alexiusgrey]

Владимир Василенко, у меня jQuery, пробую вот так

jQuery('video').on('volumechange', function() {
	jQuery('video').attr('muted');	
	jQuery(this).removeAttr('muted');	
	})

не помогает
и вот так пробовал

jQuery('video').on('volumechange', function() { 
 jQuery('video').prop('muted', true); 
jQuery(this).prop('muted', false); 
})

[Владимир Василенко]

alexiusgrey, попробуйте таким образом

const videoElements = document.getElementsByTagName('video');
    for (const currentVideoElement of videoElements) {
        currentVideoElement.addEventListener('volumechange', () => {
            for (const otherVideoElement of videoElements) {
                if (otherVideoElement !== currentVideoElement) {
                    otherVideoElement.muted = true;
                }
            }
        });
    }

[Владимир Василенко]

alexiusgrey, попробуйте выполнить код в другой момент времени, например после загрузки страницы или перед работой каких-то других скриптов. Если выполнить в консоли браузера, то кажется применятся ко всем. Он и сейчас частично работает, к части видео применяется, а к части нет.
---
В моем случае на главной странице не применился, а если нажать на слайдере стрелку влево, то будет 5 видео к которым применился.

[alexiusgrey]

да, после window.onload сработало, вроде как, надеюсь, огромное спасибо!