Pause other videos when slide is changed | Swiper.js | React Player

Question

I need help for my video carousel using Swiper.js and React Player. I want to stop the video when swiped and became inactive slide. I set the state like below and it does behave as I wanted. But now, it autoplays the active slide even autoplay prop is false. How can I achieve both stop playing inactive video and not auto playing the active one? I have stuck here almost 3 weeks so I appreciate any suggestions.

UPDATE: Revised question to be clearer and includes autoplay issue.

 const videodata = [
        {
            id: 0,
            name: 'video1',
            url: 'https://www.youtube.com/1234',
        },
        {
            id: 1,
            name: 'video2',
            url: 'https://www.youtube.com/5678',
        },
    ]


const [isPlaying, setIsPlaying] = useState(false)
 <Swiper             
     onSlideChange={(swiper) => {
     if (swiper.activeIndex !== videodata.id) {
         setIsPlaying(false)} 
                        }}
         autoplay={false}                  
         watchSlidesProgress={true}>
      {videodata.map((data) => (
      <SwiperSlide>
        <ReactPlayer
          key={data.id}
          url={data.url}
          controls={true}
          playing={isPlaying}/>
        </SwiperSlide>
       ))}
 </Swiper>

score 2 · Accepted Answer · answered Oct 03 '22 at 01:09

I finally found a solution. No need to use useContext like [this][1]. This also works with pagination={{clickable: true}} and grabCursor={true} I hope this helps somebody!

const videodata = [
  {
    id: 1,
    url: "https://www.youtube.com/1234"
  },
  {
    id: 2,
    url: "https://www.youtube.com/1234"
  },
  {
    id: 3,
    url: "https://www.youtube.com/1234"
  }
];

export default function App() {
  const [isPlaying, setIsPlaying] = useState(null);

  return (
      <Swiper
        className="mySwiper"
        onSlideChange={() => {
          setIsPlaying(null);
        }}
        autoplay={false}
        watchSlidesProgress={true}
      >
        {videos.map((data) => (
          <SwiperSlide key={data.id}>
            <ReactPlayer
              key={data.id}
              url={data.url}
              controls={true}
              onPlay={() => {
                setIsPlaying(data.id);
              }}
              playing={isPlaying === data.id}
            />
          </SwiperSlide>
        ))}
      </Swiper>
  );
}


  [1]: https://stackoverflow.com/questions/66329185/pause-other-video-if-selected-video-is-playing-in-react

score 0 · Answer 2 · answered Sep 30 '22 at 07:50

0

Play video only if activeIndex equal key

       <ReactPlayer
        id="VideoPlayer"
        url={someurl}
        className='react-player'
        playing={activePlay !== key ? false : true}
       >

And for swiper slider set key of current slide as key.

 <Swiper
  onSlideChange={(swiper) => {
    if (swiper.isEnd) {
    }

    if (projectData[swiper.realIndex].type === "video") {
        setActivePlay(swiper.realIndex);
    } else {
        setActivePlay(-1);
    }
}}

answered Sep 30 '22 at 07:50

jones

749
7
34

The video stops when slide changed, but now the next video plays automatically when slide changed. I want it to play only when the users press the start button. – Chi Sep 30 '22 at 21:46

Pause other videos when slide is changed | Swiper.js | React Player

2 Answers2