Question

更换幻灯片时暂停其他视频 | Swiper.js | React Player

2022-09-08

3116

reactjs react-hooks carousel swiper.js react-player

我需要使用 Swiper.js 和 React Player 来制作视频轮播。我想在滑动并变为非活动幻灯片时停止视频。我设置了如下所示的状态，它确实按照我的意愿运行。但现在，即使 autoplay 属性为 false，它也会自动播放活动幻灯片。我怎样才能同时停止播放非活动视频而不自动播放活动视频？我在这里呆了将近 3 周，所以我很感激任何建议。

更新：修改问题以使其更清晰，并包括自动播放问题。

 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>

Answer 1

我终于找到了解决方案。无需使用像 [this][1] 这样的 useContext。这也适用于 pagination={{clickable: true}> 和 grabCursor={true> 希望这对某些人有帮助！

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

Answer 2

仅当 activeIndex 等于 key 时播放视频

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

对于滑动条滑块，将当前幻灯片的 key 设置为 key。

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

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