React 播放器缩略图答案

【问题标题】：React Player ThumbnailReact 播放器缩略图
【发布时间】：2019-03-20 22:00:10
【问题描述】：

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

如果您知道在 React 网络应用中播放视频的更好选择，并且支持缩略图，那也很棒。

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

谢谢

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

【问题讨论】：

作为一种解决方法，您可以在视频开始播放时显示和隐藏您可以隐藏的 img 标签。唯一的问题是创建图像
是的，这是最难的部分 :) 我真的不知道如何为所有可能的视频服务（youtube、vimeo、dailymotion 等）创建缩略图。
刚刚检查并发现这个npmjs.com/package/react-video-thumbnail 可能会对您有所帮助。给定的 URL 会返回一个缩略图

标签： javascript reactjs video react-player

【解决方案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

【讨论】：

【解决方案2】：

使用 light 属性为播放器提供图片 URL。

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

【讨论】：

如何让light 始终保持高度
这个解决方案不是很好。它不允许点击播放视频。

【解决方案3】：

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

【讨论】：

谢谢，我正在使用 react-player，我也尝试了第二个，但效果不佳（不支持那么多来源）。你能建议任何方法来捕捉视频的第一帧吗？当用户提交视频链接时，我需要这样做。
您使用的是哪个网址？
请查看此链接。它也可以帮助你jsfiddle.net/e6w3rtj1
在react-player中可以将light设置为true，为什么还要截取视频的第一帧？