微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用 react-responsive-carousel

如何解决使用 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 举报,一经查实,本站将立刻删除。