Skip to main content

ReactJS: How to play video which comes in center and pause all other videos


Blogjafza

In maplist I have 20 items that is 20 videos I want to do is play video which comes in center of viewport and pause all others and keep that behaviour throughout scrolling:

const [reels, setReels] = useState([]); useEffect(() => { fetchAllVideos(); }, []); const fetchAllVideos = async () => { const getAllVideosRes = await getAllVideos(pageNumber); setReels(getAllVideosRes); }; return ( <> reels.map((item, idx) => { return ( <MDBox mb={3} key={idx}> <Card sx={{ borderRadius: "25px" }}> <video style={{ height: "100%", width: "100%", objectFit: "cover", borderRadius: "25px", }} loop controls> <source src={item.photo} type="video/mp4" /> </video> </MDBox> </Card> </MDBox > ); }) </> )
Share this post
DesignSpark Electrical Logolinkedin