Pausing Video when navigating in Carousel and React Player

Question

I am creating a Carousel to show some videos including audio, however when navigating the carousel using the arrows the video and audio continue playing. I dont know if an event listener would be best or if there is a React Player component I can use? Here is my code


     return <div className="App">
              <Carousel>
                {videoProperties.map ((videoObject) => {
                    return (
                        <Carousel.Item key={videoObject.id}>
                            <ReactPlayer
                            url={videoObject.src}
                            width="100%"
                            pip= {true}
                            controls={true}
                            playing={false}                  
                            />
                            <Carousel.Caption>
                                <h3>{videoObject.title}</h3>
                                <p>{videoObject.credit}</p>
                            </Carousel.Caption>
                        </Carousel.Item>     
                    )
                    })}     
              </Carousel>
            </div>;
    };

export default VideoCarousel;

score 0 · Answer 1 · answered Mar 14 '23 at 07:09

You could use something like this. Play video only if activeIndex equal key. Eg:

 const [activePlay, setActivePlay] = useState(0);

 const handleSelect = (selectedIndex, e) => {
  setActivePlay(selectedIndex);
 };


   <Carousel onSelect={handleSelect}>
     {videoProperties.map ((videoObject,key) => {
        return (
           <Carousel.Item key={videoObject.id}>
              .....
              <ReactPlayer url={data.url} playing={activePlay !== key ? false : true}/>
               .....
           </Carousel.Item>
           )
        })}  
   </Carousel>

This will set play true only if activePlay and key is same. If you want to play only when user click on specific video, you can set another state and check if user click video index is same as this state. Hope it helps.

Pausing Video when navigating in Carousel and React Player

1 Answers1