打开模态框时视频未暂停的技术问题求助

你的代码已经尝试在点击视频时调用暂停方法，但可能存在逻辑触发时机或事件干扰的问题，以下是几种可靠的解决方式：

方式一：在模态框打开逻辑中直接暂停 #

把暂停视频的逻辑整合到打开模态框的函数里，避免点击事件冲突：

const videoRef = useRef(null);

function openModal(url, index) {
  // 打开模态框前先暂停当前视频
  videoRef.current?.pause();
  setImageUrl(url);
  setActiveIndex(index);
  setIsOpen(true);
}

<video
  ref={videoRef}
  controls
  className="h-[400px] w-full mt-3 border border-white"
  onClick={() => openModal(communityImages, index)}
>
  <source
    src={data?.mediaUrls[0]?.mediaUrl}
    type="video/mp4"
  />
</video>

方式二：监听模态框状态自动暂停 #

通过useEffect监听模态框的打开状态，一旦模态框激活就暂停视频：

const videoRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);

// 监听模态框状态，打开时自动暂停视频
useEffect(() => {
  if (isOpen && videoRef.current) {
    videoRef.current.pause();
  }
}, [isOpen]);

function openModal(url, index) {
  setImageUrl(url);
  setActiveIndex(index);
  setIsOpen(true);
}

<video
  ref={videoRef}
  controls
  className="h-[400px] w-full mt-3 border border-white"
  onClick={() => openModal(communityImages, index)}
>
  <source
    src={data?.mediaUrls[0]?.mediaUrl}
    type="video/mp4"
  />
</video>

方式三：适配多视频场景 #

如果页面存在多个视频，单个ref无法覆盖所有实例，可改用数组ref管理：

const videoRefs = useRef([]);
const [isOpen, setIsOpen] = useState(false);

useEffect(() => {
  if (isOpen) {
    // 遍历所有视频实例，统一暂停
    videoRefs.current.forEach(video => video?.pause());
  }
}, [isOpen]);

// 批量渲染视频时绑定ref
{mediaList.map((data, index) => (
  <video
    key={index}
    ref={el => videoRefs.current[index] = el}
    controls
    className="h-[400px] w-full mt-3 border border-white"
    onClick={() => openModal(communityImages, index)}
  >
    <source
      src={data?.mediaUrls[0]?.mediaUrl}
      type="video/mp4"
    />
  </video>
))}

核心逻辑都是在模态框打开的关键节点，主动调用视频元素的pause()方法，确保后台视频停止播放。

内容的提问来源于stack exchange，提问作者basit khan