javascript - Video thumbnails are duplicated for multiple videos in a grid

Question

Background

Creating a portfolio page showcasing images and videos using Gatsby/React. I have stored the media sources in an array and then I traverse over this array to create a grid.

Problem

The video thumbnails in the grid are getting duplicated. The second video is getting the thumbnail of first video:

Although, the dev tools show different sources for these videos.

Happens again on another page:

Video objects are created as following:

<VideoContainer key={`vid-${section}-${itemCounter}`}>
  <video className="proj-video" preload="metadata">
    <source src={currImg.src} type={`videomp4`} />
  </video>
  <div className="btn-container">
    <FontAwesomeIcon color="white" size="4x" icon="play" />
  </div>
</VideoContainer>

<VideoContainer /> is a styled div.

It happens on multiple videos. What I've tried so far:

1. Ensure that the sources of these videos are different. When the video is played (by clicking on the play button over the thumbnail), correct video is played.
2. Add a key attribute on the video tag as well. But, it doesn't solves the problem.

Note: It is very indeterministic behavior because it doesn't happens always. Sometime, it gets corrected on page refresh and sometimes it doesn't.

Edit

You can see that I am not setting thumbnail from another source. It just displays the video frame. I append "#t=10" (any number) at the end of video URL and add preload="metadata" on the video tag to load the frame at that time.

question from:https://stackoverflow.com/questions/65903209/video-thumbnails-are-duplicated-for-multiple-videos-in-a-grid

Answer 1

Try adding a more unique key:

<VideoContainer key={currImg}>
  <video className="proj-video" preload="metadata">
    <source src={currImg.src} type={`videomp4`} />
  </video>
  <div className="btn-container">
    <FontAwesomeIcon color="white" size="4x" icon="play" />
  </div>
</VideoContainer>

vid-${section}-${itemCounter}, for its own nature, is a good identifier but not a good key, but it seems that may not be as unique as currImg is.