反应播放器缩略图

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

如果您有要作为缩略图的特定图像，则应将图像 URL 设置为浅色：

<ReactPlayer                                              
url='https://vimeo.com/243556536'
light = 'https://sampleimage.com'
playing
controls/>

如果你想显示视频的缩略图，你只需要将灯光设置为 true：

<ReactPlayer                                              
url='https://vimeo.com/243556536'
light = {true}
playing
controls/>

在此链接上查看反应播放器的文档：https://www.npmjs.com/package/react-player

Answer 3

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

Answer 4

如果您尝试添加纠缠图像，那么它们具有内置功能。

<Player
poster="/assets/poster.png"
src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
/>

这是我找到它的地方.我正在寻找一些东西，来了这个，然后是你的帖子，所以我想我会分享它。