Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом

100

#2470a1

Как сделать кнопку play/stop для видео mp4 в ZeroBlock в Tilda

Pitt Leffer & Robert Cristian

Heavens (Original Mix)

Как сделать кнопку play/stop для видео mp4 в ZeroBlock в Tilda

Создали ZeroBlock, добавили в него элемент Video и добавили mp4 видео

Создали элементы с иконками play и button (в примере это image, но можно использовать и другие, но если это картинка, то отключите ей lazyload)

Добавили нашим кнопкам классы play-video и stop-video

Объединили кнопки и video в один auto layout и задали ему класс video-element

Вставили код на страницу в блок Т123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Как сделать кнопку play/stop для видео mp4 в ZeroBlock в Tilda

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера

<script>
(function () {
    
    document.addEventListener('DOMContentLoaded', function() {
        
        const volume = 50; //Громкость от 0 до 100
        
        const videoBlocks = document.querySelectorAll('.video-element');
        
        if (videoBlocks.length === 0) {
            return;
        }
        
        videoBlocks.forEach(function(block, index) {
            const video = block.querySelector('video');
            const playBtn = block.querySelector('.play-video');
            const stopBtn = block.querySelector('.stop-video');

            
            if (!playBtn || !stopBtn) {
                return;
            }
            
            if (!video) {
                const checkVideo = setInterval(function() {
                    const foundVideo = block.querySelector('video');
                    if (foundVideo) {
                        clearInterval(checkVideo);
                        initVideo(foundVideo, playBtn, stopBtn);
                    }
                }, 100);
                return;
            }
            
            initVideo(video, playBtn, stopBtn);
        });
        
        function initVideo(video, playBtn, stopBtn) {
            video.volume = volume/100;
            
            stopBtn.classList.add('hidden-button');
            
            playBtn.addEventListener('click', function() {
                video.play();
                playBtn.classList.add('hidden-button');
                stopBtn.classList.remove('hidden-button');
            });
            
            stopBtn.addEventListener('click', function() {
                video.pause();
                video.currentTime = 0;
                stopBtn.classList.add('hidden-button');
                playBtn.classList.remove('hidden-button');
            });
            
            video.addEventListener('ended', function() {
                stopBtn.classList.add('hidden-button');
                playBtn.classList.remove('hidden-button');
            });
            
            video.addEventListener('error', function() {
                playBtn.classList.remove('hidden-button');
                stopBtn.classList.add('hidden-button');
            });
            
            if (!video.paused) {
                playBtn.classList.add('hidden-button');
                stopBtn.classList.remove('hidden-button');
            }
        }
    });
    

})();    
</script>


<style>
.hidden-button {
    display: none !important;
}    
.play-video, .stop-video{
    cursor: pointer;
}
.video-element [data-elem-type="video"]{
    pointer-events: none;
}

</style>