Как по клику по видео сделать паузу и потом по повторному воспроизвести . Видео несколько на одной стр

Question

let currentVideo = null; // Переменная для хранения текущего видео

document.querySelectorAll('.values__content-slider_slide-flex_photo').forEach(function(photo) {
    photo.addEventListener('click', function() {
        // Добавляем класс photo-none к текущему элементу и его соседям
        this.classList.add('photo-none'); // 'this' - это элемент, на который кликнули

        // Останавливаем текущее видео, если оно проигрывается
        if (currentVideo && !currentVideo.paused) {
            currentVideo.pause();
            currentVideo.currentTime = 0; // Сбрасываем время видео
        }

        // Добавляем класс photo-none к элементам с классом values__content-slider_slide-flex_photo-play
        const playButton = this.querySelector('.values__content-slider_slide-flex_photo-play');
        if (playButton) {
            playButton.classList.add('photo-none');
        }

        // Воспроизводим новое видео
        const video = this.querySelector('.values__content-slider_slide-flex_photo-video');
        if (video) {
            video.play();
            currentVideo = video; // Обновляем текущую видео-переменную
        }
    });
});

// Остановка видео, если оно не видно
function checkVisibility() {
    document.querySelectorAll('.values__content-slider_slide-flex_photo-video').forEach(function(video) {
        const rect = video.getBoundingClientRect();
        const isVisible = (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );

        if (!isVisible) {
            video.pause(); // Останавливаем видео, если не видно
            if (currentVideo === video) {
                currentVideo = null; // Обнуляем текущую видео-переменную, если она не видна
            }
        }
    });
}

                                            <div class="values__content-slider_slide-flex_photo">
                                                <video class="values__content-slider_slide-flex_photo-video" controls loop>
                                                    <source src="assets/video/video.mp4" type="video/mp4">
                                                </video>
                                                <img class="values__content-slider_slide-flex_photo-play" src="assets/img/Play.png" alt="play">
                                            </div>
                                            
                                                                                        <div class="values__content-slider_slide-flex_photo">
                                                <video class="values__content-slider_slide-flex_photo-video" controls loop>
                                                    <source src="assets/video/video.mp4" type="video/mp4">
                                                </video>
                                                <img class="values__content-slider_slide-flex_photo-play" src="assets/img/Play.png" alt="play">
                                            </div>

Answer 1

Я Ваш код не задействовал, это другой вариант с меньшим количеством кода:

const allvideo = document.querySelectorAll("video");
for(i = 0; i < allvideo.length; i ++){
    allvideo[i].onclick = function(){this.paused ? this.play() : this.pause()};
}

<video src="https://mysynthesizer.github.io/index.hetemeel/video1.mp4"></video>
<video src="https://mysynthesizer.github.io/index.hetemeel/video2.mp4"></video>

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

БЛОГ НА HUSL

Как по клику по видео сделать паузу и потом по повторному воспроизвести . Видео несколько на одной стр

Ответы (1 шт):