是否可以在antd的Image.PreviewGroup组件中插入video标签实现媒体画廊？

Ant Design 原生的Image.PreviewGroup仅支持识别嵌套的Image组件生成预览队列，无法识别普通video标签，也没有内置视频预览播放的能力，不需要再在「原生Image组件混插video实现混播画廊」这个方向继续尝试。

可以参考以下两种可行方案实现同时兼容图片和视频的媒体画廊：

• 自定义预览弹窗实现：放弃使用Image.PreviewGroup的原生预览能力，所有缩略图（图片缩略图、视频封面缩略图）单独渲染，点击缩略图时自行控制Modal弹窗展示，根据当前选中的资源类型分别渲染Image组件或video播放器，自行实现前后切换逻辑，该方案灵活性最高，适配性最好。
• 二次封装扩展能力：如果需要复用antd Image预览的现有交互逻辑，可以基于Image.PreviewGroup做二次封装，监听预览切换事件，识别到当前预览资源为视频时，动态替换预览区域的DOM内容为视频播放器，该方案需要兼容antd不同版本的内部DOM结构，改造成本更高。

以下是自定义预览实现的参考代码：

import { useState } from 'react';
import { Image, Modal } from 'antd';

// 画廊资源配置
const mediaList = [
  { type: 'image', src: 'image1.svg', thumbnail: 'image1.svg' },
  { type: 'image', src: 'imag2.png', thumbnail: 'imag2.png' },
  { type: 'video', src: 'video.mp4', thumbnail: 'video-cover.png' }
]

const App = () => {
  const [visible, setVisible] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);
  const currentMedia = mediaList[currentIndex];

  const handlePreview = (index) => {
    setCurrentIndex(index);
    setVisible(true);
  }

  return (
    <div>
      {/* 缩略图列表 */}
      {mediaList.map((item, index) => (
        <div key={index} onClick={() => handlePreview(index)} style={{ display: 'inline-block', marginRight: 16, cursor: 'pointer' }}>
          {item.type === 'image' ? (
            <Image width={200} src={item.thumbnail} preview={false} />
          ) : (
            <img width={200} src={item.thumbnail} alt="视频封面" />
          )}
        </div>
      ))}

      {/* 自定义预览弹窗 */}
      <Modal open={visible} footer={null} onCancel={() => setVisible(false)} width={800}>
        {currentMedia.type === 'image' ? (
          <Image src={currentMedia.src} preview={false} style={{ width: '100%' }} />
        ) : (
          <video src={currentMedia.src} controls style={{ width: '100%' }} />
        )}
        {/* 可自行添加前后切换按钮扩展多资源切换能力 */}
      </Modal>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Vlad