CODEWITHSUNDEEP
reactjsjsxantdant-design-prong-zorro-antd
Vlad
Vlad

Reputation: 511

Is it possible to insert video inside antd image.preview group

i tried to create a sort of media gallery for photos and videos. I tried a lot of free gallaries although i havent found a single one which supports video. I tried to insert a video tag inside of ANTD image.preview group although as i expected it didn't work. It showed a video cover in gallery but no video. I was wondering is it possible to do with ANTD or i just wasting time?

import { Image } from 'antd';

const App = () => (
 <div>
  <Image.PreviewGroup>
    <Image width={200} src="image1.svg" />
    <Image width={200} src="imag2.png" />
    <video width={200} src="video.mp4" />
  </Image.PreviewGroup>
 </div>

Upvotes: 0

Views: 1594

Answers (1)

zerocewl
zerocewl

Reputation: 12804

Try to use URL.createObjectURL():

The URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.

If you have your video file in a React state hook:

const [videoFile, setVideoFile] = useState();

You make can use of createObjectUrl directly in JSX:

<video width="400" controls>
    <source src={URL.createObjectURL(videoFile)}/>
</video>

Upvotes: 1

Related Questions