反应播放器缩略图

Question

我正在使用 react-player 播放视频。不确定是否有更好的选择，但这似乎可以完成这项工作。我唯一的问题是，我需要获取视频的缩略图。知道我会如何解决吗？

如果您知道在 React Web 应用程序中使用受支持的缩略图播放视频的更好选择，那也很棒。

<ReactPlayer                                                    
 className="videoFrame"
 url={url}
 playing
 controls
/>

谢谢

编辑：我最终将视频本身用作缩略图并阻止其上的所有鼠标事件。然后使用父 div 作为按钮。在 youtube 的情况下，我用 youtube ( https://img.youtube.com )提供的缩略图替换视频，因为视频上的播放按钮很大。大多数其他玩家没有它。

Answer 1

使用该light道具为播放器提供图像 URL。

<ReactPlayer                                                    
 className="videoFrame"
 url={url}
 light="http://placekitten.com/200/300"
 playing
 controls
/>

Answer 2

您需要将视频的第一帧捕获为图像，然后保存并使用。但这是在您进行图像处理时使用的。我推荐以下选项请检查此处 - https://www.npmjs.com/package/react-player 否则使用通过此链接 - https://video-react.js.org/