Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Запуск видео и остановка другого по клику (https://javascript.ru/forum/css-html/85255-zapusk-video-i-ostanovka-drugogo-po-kliku.html)

Quark_ 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 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_ 29.05.2023 13:47
voraa, спс работает.
Цитата:
Сообщение от voraa
<script>
const videos = document.querySelectorAll('video');
videos.forEach (video => {
    video.addEventListener('click', (ev) => {
        ev.preventDefault();
        videos.forEach(v => v.pause())
        video.play();
    })
})
</script>
controls="controls" получается лучше скрыть т.к. play/pause по кнопке сбивает скрипт?

voraa 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


Часовой пояс GMT +3, время: 04:12.