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