如何使用 Video-React 预览视频答案

【问题标题】：How to Preview video with Video-React如何使用 Video-React 预览视频
【发布时间】：2020-10-10 21:55:58
【问题描述】：

当用户在 react 中选择视频时，我想显示视频预览。有朋友建议使用video-react库来预览视频。您能否指导我如何实现以及如何在我的项目中实现视频预览。目前我正在使用ant-design 进行视频选择

【问题讨论】：

标签： javascript reactjs ecmascript-6 antd ant-design-pro

【解决方案1】：

只需按照教程进行操作即可。

import React from 'react';
import { Player } from 'video-react';

export default (props) => {
  return (
    <Player
      playsInline
      poster="/assets/poster.png"
      src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
    />
  );
};

对于缩略图，您可以使用react-video-thumbnail。它为给定的视频 url 生成缩略图。 https://www.npmjs.com/package/react-video-thumbnail

【讨论】：

但我也希望该用户在那里播放和暂停视频
那么它真的很容易。跟着video-react的教程就行了。
你能给我推荐一下教程吗？
我安装了video-react，但是当用户选择视频时我如何实现功能
当用户选择一个视频集时，它的 URL 为state。然后从那里使用它。如果你使用 redux 或其他状态管理器，会有其他解决方案。

【解决方案2】：

我使用 react-player，其中选项“controls” - 设置为 true 或 false 以显示原生播放器控件

<ReactPlayer url={'url/to/video'} className={classes.styleView} playing controls/>

【讨论】：