i have a video gallery of three videos with three different videos and poster. i want to add poster to video by default and remove it when click on video to play and re-add when video pause. i copied code from one of the stackoverflow question/answer. but it is not working for all videos. the problem is ID. i have tried document.querySelectorAll("[id$=video-overlay_]"); but still not working
here is my code
<ul class="home-page-video-gallery">
<li class="media-gallery-page-type-video media-gallery-page-type-li-1 text-center">
<div class="video-wrapper">
<div id='video-overlay' class="video-overlay">
<img
src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/home_page_v1.jpg" />
</div>
<video id="video" class="video" muted controls="" height="auto" width="931px" height="526px">
<source
src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/video_4.mp4"
type="video/mp4" /> Your browser doesn't support HTML5 video tag.
</video>
</div>
</li>
<li class="media-gallery-page-type-video media-gallery-page-type-li-1 text-center">
<div class="video-wrapper">
<div id='video-overlay' class="video-overlay">
<img
src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/v24.jpg" />
</div>
<video id="video" class="video" muted controls="" height="auto" width="931px" height="526px">
<source
src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/video_21.mp4"
type="video/mp4" /> Your browser doesn't support HTML5 video tag.
</video>
</div>
</li>
<li class="media-gallery-page-type-video media-gallery-page-type-li-1 text-center">
<div class="video-wrapper">
<div id='video-overlay' class="video-overlay">
<img
src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/v25.jpg" />
</div>
<video id="video" class="video" muted controls="" height="auto" width="931px" height="526px">
<source
src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/video_22.mp4"
type="video/mp4" /> Your browser doesn't support HTML5 video tag.
</video>
</div>
</li>
CSS Code
.video-wrapper {
position: relative;
}
.video-overlay {
top: 0;
left: 0;
position: absolute;
display: block;
z-index: 9999999;
}
.video-overlay img {
width: 931px;
height: 526px;
}
JS Code
var overlay document.getElementById('video-overlay'),
video = document.getElementById('video'),
videoPlaying = false;
function hideOverlay() {
overlay.style.display = "none";
videoPlaying = true;
video.play();
}
function showOverlay() {
// this check is to differentiate seek and actual pause
if (video.readyState === 4) {
overlay.style.display = "block";
videoPlaying = true;
}
}
video.addEventListener('pause', showOverlay);
overlay.addEventListener('click', hideOverlay);
the given code is working fine for first video but not working for all videos.
>Solution :
- Play with classes than using IDs
- Pass reference of overlay and video element as argument
- Use Object to maintain the playing status of the videos
var overlay = document.querySelectorAll('.video-overlay'),
player = document.querySelectorAll('.video'),
videoPlaying = {};
function hideOverlay(overlay, video, i) {
overlay.style.display = "none";
videoPlaying[i] = true;
video.play();
}
function showOverlay(overlay, video, i) {
if (video.readyState === 4) {
overlay.style.display = "block";
videoPlaying[i] = false; // set this to `false`
}
}
for (let i = 0; i < overlay.length; i++) {
video[i].addEventListener('pause', function() {
showOverlay(overlay[i], video[i], i)
});
overlay[i].addEventListener('click', function() {
hideOverlay(overlay[i], video[i], i)
});
}.video-wrapper {
position: relative;
}
.video-overlay {
top: 0;
left: 0;
position: absolute;
display: block;
z-index: 9999999;
}
.video-overlay img {
width: 931px;
height: 526px;
}<ul class="home-page-video-gallery">
<li class="media-gallery-page-type-video media-gallery-page-type-li-1 text-center">
<div class="video-wrapper">
<div id='video-overlay' class="video-overlay">
<img src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/home_page_v1.jpg" />
</div>
<video id="video" class="video" muted controls="" height="auto" width="931px" height="526px">
<source
src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/video_4.mp4"
type="video/mp4" /> Your browser doesn't support HTML5 video tag.
</video>
</div>
</li>
<li class="media-gallery-page-type-video media-gallery-page-type-li-1 text-center">
<div class="video-wrapper">
<div id='video-overlay' class="video-overlay">
<img src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/v24.jpg" />
</div>
<video id="video" class="video" muted controls="" height="auto" width="931px" height="526px">
<source
src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/video_21.mp4"
type="video/mp4" /> Your browser doesn't support HTML5 video tag.
</video>
</div>
</li>
<li class="media-gallery-page-type-video media-gallery-page-type-li-1 text-center">
<div class="video-wrapper">
<div id='video-overlay' class="video-overlay">
<img src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/v25.jpg" />
</div>
<video id="video" class="video" muted controls="" height="auto" width="931px" height="526px">
<source
src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/video_22.mp4"
type="video/mp4" /> Your browser doesn't support HTML5 video tag.
</video>
</div>
</li>