这里有一个由软件包作者创建的例子，他使用自定义itemRender来渲染视频媒体。他在描述点击时渲染视频，但你当然可以改变它以立即在滑块中渲染视频。
可以看到整个应用程序：https://github.com/xiaolin/react-image-gallery/blob/master/example/app.js

// items
{
    thumbnail: `${PREFIX_URL}4v.jpg`,
    original: `${PREFIX_URL}4v.jpg`,
    embedUrl: 'https://www.youtube.com/embed/4pSzhZ76GdM?autoplay=1&showinfo=0',
    description: 'Render custom slides within the gallery',
    renderItem: this._renderVideo.bind(this)
},

_renderVideo(item) {
    return (
      <div>
        {
          this.state.showVideo[item.embedUrl] ?
            <div className='video-wrapper'>
                <a
                  className='close-video'
                  onClick={this._toggleShowVideo.bind(this, item.embedUrl)}
                >
                </a>
                <iframe
                  width='560'
                  height='315'
                  src={item.embedUrl}
                  frameBorder='0'
                  allowFullScreen
                >
                </iframe>
            </div>
          :
            <a onClick={this._toggleShowVideo.bind(this, item.embedUrl)}>
              <div className='play-button'></div>
              <img className='image-gallery-image' src={item.original} />
              {
                item.description &&
                  <span
                    className='image-gallery-description'
                    style={{right: '0', left: 'initial'}}
                  >
                    {item.description}
                  </span>
              }
            </a>
        }
      </div>
    );
  }

我用它玩了一下，我用一个简单的视频标签渲染实现了它。
我为图库渲染创建了一个单独的文件（galleryRenders.tsx），以防将来我需要更多。到目前为止，它只包含以下内容：

export const renderVideoUrl = (video) => {
  return (
    <video controls muted>
      <source src={video.original} />
    </video>
  )
}

我的媒体数组还包含type属性，它可以是任何值，但如果它具有值video，我就可以将renderItem property附加到它
因此，在将媒体项作为属性分配给<ImageGallery items={media} />之前，循环遍历它
回路：

import { renderVideoUrl } from "../../functions/galleryRenders";

media.forEach((item, i) => {
  if(item.type === 'video'){
    media[i].renderItem = renderVideoUrl.bind(media[i])
  }
})

你可以使用这个，我刚刚使用了一个renderVideo函数与iframe，检查这个。插入一个renderItem在您的对象视频

const images = [
        {
          original: 'https://picsum.photos/id/1018/1000/600/',
          thumbnail: 'https://picsum.photos/id/1018/250/150/',
        },
        {
          original: 'https://picsum.photos/id/1015/1000/600/',
          thumbnail: 'https://picsum.photos/id/1015/250/150/',
        },
        {
          original: 'https://picsum.photos/id/1019/1000/600/',
          thumbnail: 'https://picsum.photos/id/1019/250/150/',
        },
        {
          embedUrl:
            'https://www.youtube.com/embed/4pSzhZ76GdM?autoplay=1&showinfo=0',
          original:
            'https://raw.githubusercontent.com/xiaolin/react-image-gallery/master/static/4v.jpg',
          thumbnail:
            'https://raw.githubusercontent.com/xiaolin/react-image-gallery/master/static/4v.jpg',
          renderItem: renderVideo.bind(this),
        },
      ];
    

 const renderVideo = (item) => {
    return (
      <div className="video-wrapper">
        <iframe
          width="100%"
          height="480px"
          src={item.embedUrl}
          frameBorder="0"
          allowFullScreen
          title="ex"
        />
      </div>
    );
  };

然后在react-image-gallery中的ImageGallery组件中这样使用它。

<ImageGallery
                  items={images}
                  showIndex
                  onSlide={handleSlideChange}
                  showVideo={showVideo}
                  showPlayButton
                />