Question

我正在使用React Player播放视频。不知道是否有更好的选择，但这似乎可以解决问题。我唯一的问题是，我需要获取视频的缩略图。知道我将如何解决吗？

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

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

谢谢

编辑：我最终将视频本身用作缩略图，并阻止了所有鼠标事件。然后使用parent 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/>

在以下链接上查看react-player的文档：https://www.npmjs.com/package/react-player

Answer 3

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

反应播放器缩略图

3 个答案: