Так попробуйте
<body>
<p class="video">
<video autoplay="autoplay" loop="loop" muted="muted" controls="controls" onloadstart="this.volume=0.1"><source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /></video>
<video controls="controls" onloadstart="this.volume=0.1"><source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /></video>
<video controls="controls" onloadstart="this.volume=0.1"><source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /></video>
</p>
<script>
const videos = document.querySelectorAll('video');
videos.forEach (video => {
video.addEventListener('play', (ev) => {
for (const v of videos)
if (v!==video) v.pause()
})
video.addEventListener('click', (ev) => {
if (ev.target === video) {
ev.preventDefault();
video.play();
}
})
})
</script>
</body>
Но клик на controls действительно работает только при клике на саму кнопку play/pause