是否可以在antd image.preview组内插入视频

Question

我试图为照片和视频创建一种媒体库。尽管我还没有找到一个支持视频的免费画廊，但我尝试了很多免费画廊。 我试图在 ANTD image.preview 组中插入一个视频标签，尽管正如我所料它不起作用。它在图库中显示了视频封面，但没有视频。 我想知道是否可以使用 ANTD 还是我只是在浪费时间？

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>

Answer 1

尝试使用URL.createObjectURL():

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

如果您的视频文件在 React state hook:

const [videoFile, setVideoFile] = useState();

您可以直接在 JSX 中使用 createObjectUrl：

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