I am trying to insert a "<ReactPlayer /" into the "<Image /" preview of antd. Need to display player when you click the "preview" button on some image and play the video. How I can do this?
I tried to do this with preview property on Image, but did'nt found the solution
import React from 'react';
import ReactPlayer from 'react-player';
import './VideoPreview.scss';
import { Image } from 'antd';
interface IProps {
videoUrl: string;
}
export const VideoPreview: React.FC<IProps> = (props) => {
return (
<Image src={'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'}
preview={{
getContainer: {<ReactPlayer url={props.videoUrl}}
}}>
</Image>
);
};