使用 react-responsive-carousel

问题描述

 const VideoSlide = ({ index,currentSlide,url,title,goNextVideo }) => {
 const videoRef = useRef(null);
  return (
    <div className="position-relative">
      <ReactPlayer
        ref={videoRef}
        width="100%"
        height="calc(90vh - 2px)"
        url={url}
        play={index == currentSlide}
        controls
        onEnded={goNextVideo}
      />
    </div>
  );
};

const Videogallery = ({ videoList }) => {
  const [currentSlide,setCurrentSlide] = useState(0);

  const getVideoThumb = (videoId) =>
    `http://react-responsive-carousel.js.org/assets/${videoId}.jpeg`;

  const customrenderThumb = (children) =>
    children.map(({ props },index) => {
      if (props.thumbnail) {
        return <img src={props.thumbnail} alt={props.thumbnail} />;
      } else {
        return <img src={getVideoThumb(index)} alt={props.thumbnail} />;
      }
    });

  const goNextVideo = () => {
    setCurrentSlide(currentSlide + 1);
  };

  const updateCurrentSlide = (index) => {
    if (currentSlide !== index) {
      setCurrentSlide(index);
    }
  };

  return (
    <Carousel
      className="video-gallery"
      selectedItem={currentSlide}
      renderThumbs={customrenderThumb}
      onChange={updateCurrentSlide}
    >
      {videoList &&
        videoList.map((video,index) => {
          return (
            <VideoSlide
              key={index}
              index={index}
              currentSlide={currentSlide}
              goNextVideo={goNextVideo}
              title={video.title}
              url={`${process.env.SITE_URL}${video.video_src}`}
              thumbnail={`${process.env.SITE_URL}${
                video.thumbnail ? video.thumbnail : video.user_profile.image_src
              }`}
            />
          );
        })}
    </Carousel>
  );
};

我有一个带有 react-player 的 react-responsive-carousel，我的要求是创建一个自动滑动的视频轮播，并在变得活跃时开始播放。滑出时变为非活动状态，变为活动状态时自动播放视频，视频结束时自动滑出到下一张幻灯片。

我能够完成视频幻灯片，但在视频处于活动状态时无法播放。

有没有我可以研究的插件。或者我如何才能在活动中播放视频。

在 react-responsive-carousel 的故事书中找到了一个名为 selectedItem 的道具，但它在加载时返回 undefined

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）