Форум

Quark_ · #1 (**permalink**) 29.05.2023, 12:00

Нужна помощь со скриптом, чтобы по клику на любое остановленное видео, оно запускалось, а работающее сразу на паузу.

Структура такая: первое видео с автозапуском, остальные нет.

<p class="video">
<video autoplay="autoplay" loop="loop" muted="muted" controls="controls" onloadstart="this.volume=0.1"><source src="/images/video/01.mp4" type="video/mp4" /></video>
 
<video controls="controls" onloadstart="this.volume=0.1"><source src="/images/video/02.mp4" type="video/mp4" /></video>
 
<video controls="controls" onloadstart="this.volume=0.1"><source src="/images/video/03.mp4" type="video/mp4" /></video>
</p>

voraa · #2 (**permalink**) 29.05.2023, 13:13

<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('click', (ev) => {
		ev.preventDefault();
		videos.forEach(v => v.pause())
		video.play();
	})
})
</script>
</body>

Quark_ · #3 (**permalink**) 29.05.2023, 13:47

voraa, спс работает.

Сообщение от voraa

controls="controls" получается лучше скрыть т.к. play/pause по кнопке сбивает скрипт?

voraa · #4 (**permalink**) 29.05.2023, 14:00

Так попробуйте

<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

Форум

Справочник

Discord чат

Курсы javascript