ReactJS自定义轮播画廊：切换后视频仍播放如何解决？

方法1：监听轮播索引变化，批量暂停所有视频 #

借助React的useEffect钩子，监听slideIndex的变化，每次轮播切换时，找到页面中所有<video>元素并调用pause()方法暂停播放。

修改你的组件代码：

import { useEffect } from 'react';

// 组件内部逻辑
useEffect(() => {
  // 获取页面中所有视频元素
  const allVideos = document.querySelectorAll('video');
  allVideos.forEach(video => video.pause());
}, [slideIndex]); // 仅当slideIndex变化时执行

// 原轮播渲染代码
{dataSlider.map((obj, index) => {
  return (
    <div key={obj.id} className={slideIndex === index + 1 ? "slide active-anim" : "nothing"}>
      {obj.type ? 
        (<img src={obj.img}/> ) : 
        (<video controls>
          <source src={obj.vid} type="video/mp4"/>
        </video>)
      }
    </div>
  )
})}

方法2：使用Ref精准控制单个视频（性能更优） #

如果不想暂停所有视频，仅针对当前不再显示的视频进行暂停，可以用useRef存储每个视频的引用，配合索引变化事件精准操作。

import { useEffect, useRef } from 'react';

// 组件内部逻辑
const videoRefs = useRef({});

useEffect(() => {
  // 遍历所有存储的视频引用
  Object.keys(videoRefs.current).forEach(itemId => {
    const video = videoRefs.current[itemId];
    // 判断当前视频是否处于活跃轮播项中，非活跃则暂停
    const isActiveSlide = dataSlider[slideIndex - 1]?.id === itemId;
    if (!isActiveSlide && video) {
      video.pause();
    }
  });
}, [slideIndex, dataSlider]);

// 原轮播渲染代码
{dataSlider.map((obj, index) => {
  return (
    <div key={obj.id} className={slideIndex === index + 1 ? "slide active-anim" : "nothing"}>
      {obj.type ? 
        (<img src={obj.img}/> ) : 
        (<video 
          controls
          ref={el => videoRefs.current[obj.id] = el} // 用视频项的id作为键存储ref
        >
          <source src={obj.vid} type="video/mp4"/>
        </video>)
      }
    </div>
  )
})}

方案说明 #

• 方法1实现简单，适合轮播项数量较少的场景，无需额外管理引用。
• 方法2更精准，仅暂停需要停止的视频，避免不必要的DOM操作，适合视频较多的轮播场景。

内容的提问来源于stack exchange，提问作者PL Wang