时间戳

首页 > 解决方案 > 为网格中的多个视频复制视频缩略图

javascript - 为网格中的多个视频复制视频缩略图

问题描述

背景

使用 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。

它发生在多个视频上。到目前为止我已经尝试过：

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

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

编辑

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

标签： javascripthtmlreactjshtml5-videogatsby

解决方案

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

<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。

推荐阅读