1

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

0 Answers0