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 >
<li >
    <div >
        <div id='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"  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&#39;t support HTML5 video tag.
        </video>
    </div>
</li>
<li >
    <div >
        <div id='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"  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&#39;t support HTML5 video tag.
        </video>
    </div>
</li>
<li >
    <div >
        <div id='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"  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&#39;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.

CodePudding user response：

• 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 >
  <li >
    <div >
      <div id='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"  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&#39;t support HTML5 video tag.
        </video>
    </div>
  </li>
  <li >
    <div >
      <div id='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"  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&#39;t support HTML5 video tag.
        </video>
    </div>
  </li>
  <li >
    <div >
      <div id='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"  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&#39;t support HTML5 video tag.
        </video>
    </div>
  </li>