可以在图像中插入视频吗?预览

Question

我尝试创建一个照片和视频的媒体库。我尝试了很多免费的图库，但我还没有找到一个支持视频的。我尝试在ANTD图像中插入视频标签。预览组，虽然正如我所料，它没有工作。它在画廊中显示了一个视频封面，但没有视频。我想知道可以用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():

URL. createobjecturl()静态方法创建一个DOMString，其中包含一个URL，表示参数中给定的对象。

如果你的视频文件在React状态钩子中:

const [videoFile, setVideoFile] = useState();

你可以在JSX中直接使用createObjectUrl:

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