网格中的多个视频复制了视频缩略图

Question

背景

使用 Gatsby/React 创建展示图片和视频的作品集页面。我已将媒体源存储在一个数组中，然后遍历此数组以创建一个网格。

问题

网格中的视频缩略图重复。第二个视频正在获取第一个视频的缩略图：

不过，开发工具显示这些视频的不同来源。

在另一页上再次发生：

视频对象创建如下：

<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 /> 是样式化的 div.

它发生在多个视频上。到目前为止我尝试了什么：

确保这些视频的来源不同。播放视频时（通过单击缩略图上的播放按钮），将播放正确的视频。
也在 video 标签上添加一个 key 属性。但是，它并没有解决问题。

注意： 这是非常不确定的行为，因为它并不总是发生。有时，它会在页面刷新时得到更正，有时则不会。

编辑

您可以看到我没有设置其他来源的缩略图。它只显示视频帧。我在视频 URL 的末尾附加 "#t=10"（任意数字），并在视频标签上添加 preload="metadata" 以在那时加载帧。

Answer 1

尝试添加一个更独特的键：

<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}，就其本身的性质而言，是一个很好的标识符，但不是一个好的 key，但似乎可能不像 currImg 那样独特。

网格中的多个视频复制了视频缩略图

Video thumbnails are duplicated for multiple videos in a grid

javascript

html

reactjs

html5-video

gatsby

背景

问题

编辑