如何使用Video-React预览视频

时间:2018-12-05 16:42:14

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

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

视频反应链接: Click on Video-React

2 个答案:

答案 0 :(得分:0)

只需遵循这些教程即可。

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

答案 1 :(得分:0)

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

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