HTML5 video - play/pause по клику на кастомную кнопку
Приветствую! Есть обычный код видео (с кнопкой - картинкой), 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 не подходит. |
<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>
|
Спасибо БОЛЬШОЕ!!! :thanks:
|
| Часовой пояс GMT +3, время: 19:15. |