Форум

samdo · #1 (**permalink**) 06.05.2023, 08:47

Приветствую! Есть обычный код видео (с кнопкой - картинкой), controls отключены:

<div class="my-video">
   <video>
       <source src="/catalog/123.mp4" type="video/mp4">
   </video>
   <img class="play-button" src="/catalog/play-button.png" alt="">
</div>

Подскажите как сделать, чтобы видео проигрывалось при клике на кнопку (при этом кнопка исчезает, opacity: 0 или display: none). Если же во время проигрывания видео кликнуть по нему, то оно ставится на паузу, и, кнопка play появляется. Обгуглил всё - нормального решения не нашел. Подойдет и js и jquery.

Заранее, спасибо!

P.S. Видео может быть несколько на странице, поэтому вариант js с getElementById не подходит.

voraa · #2 (**permalink**) 06.05.2023, 10:45

<html>
<head>
<style>
    .hidden {
        display:none;
    }
    .play-button {
        width: 40px;
        height:40px;
    }
    
</style>
</head>
<body>
<div class="my-video">
   <video>
       <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
   </video>
   <img class="play-button" src="/catalog/play-button.png" alt="Play">
</div>
<div class="my-video">
   <video>
       <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
   </video>
   <img class="play-button" src="/catalog/play-button.png" alt="Play">
</div>

<script>
document.querySelectorAll('.my-video')
    .forEach(div =>  {
        const video = div.querySelector('video');
        const bplay = div.querySelector('img');

        video.addEventListener('click', ev => {
            if (video.paused) return;
            video.pause();
            bplay.classList.remove('hidden');
        })

        video.addEventListener('ended', ev => {
            video.currentTime = 0;
            bplay.classList.remove('hidden');
        })

        bplay.addEventListener('click', ev => {
            if (! video.paused) return;
            video.play().then (() => {bplay.classList.add('hidden');})
        })
    })
</script>
</body>
<html>

samdo · #3 (**permalink**) 06.05.2023, 13:37

Спасибо БОЛЬШОЕ!!!

Форум

Справочник

Discord чат

Курсы javascript