8

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

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

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

谢谢

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

4

3 回答 3

10

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

<ReactPlayer                                                    
 className="videoFrame"
 url={url}
 light="http://placekitten.com/200/300"
 playing
 controls
/>
于 2019-09-10T08:52:55.937 回答
1

如果您有一个特定的图像想要成为缩略图，您应该将图像 URL 设置为亮：

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

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

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

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

于 2020-02-12T05:25:35.917 回答
0

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

于 2018-10-16T11:29:37.527 回答