CODEWITHSUNDEEP
javascriptreactjsecmascript-6antdant-design-pro
Jon
Jon

Reputation: 491

How to Preview video with Video-React

I want to show video preview when user select a video in react . Some friend suggested that use video-react library for preview video . Could you please guide me how it would be possible and how i can implement video preview in my project . Currently I am using ant-design for video selection

Vide-React Link :Click on Video-React

Upvotes: 2

Views: 5523

Answers (2)

Yanov
Yanov

Reputation: 674

Im use react-player, where option "controls" - Set to true or false to display native player controls

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

Upvotes: 0

Janaka Chathuranga
Janaka Chathuranga

Reputation: 1840

Just follow the tutorials. 

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"
    />
  );
};

For thumbnails you can use react-video-thumbnail. It generates a thumbnail for a given video url. https://www.npmjs.com/package/react-video-thumbnail

Upvotes: 1

Related Questions