响应式React Web应用中窗口调整后视频播放器重置问题咨询

你推测的原因完全正确！问题核心就是react-responsive的MediaQuery组件在匹配不同断点时，会卸载不匹配分支下的组件，视频播放器所在的组件被卸载后重新挂载，播放状态自然就丢失了。下面给你几个实用的解决方案：

1. 让视频播放器脱离MediaQuery分支，保持挂载状态 #

这是最直接的解决方式——把视频播放器移到所有MediaQuery的外层（也就是Content组件的根层级），通过CSS的display属性控制不同尺寸下的显示/隐藏，而不是依赖组件卸载来切换布局。这样视频播放器始终处于挂载状态，播放进度就不会被重置。

示例代码：

import { MediaQuery } from 'react-responsive';
import { Layout } from 'antd';
const { Content } = Layout;

const AppContent = () => {
  return (
    <Content>
      {/* 视频播放器始终挂载，通过CSS控制显示逻辑 */}
      <div className="video-player">
        {/* 你的视频播放器组件 */}
      </div>

      <MediaQuery minWidth={1200}>
        {/* 大屏专属布局内容 */}
      </MediaQuery>
      <MediaQuery minWidth={768} maxWidth={1199}>
        {/* 中屏专属布局内容 */}
      </MediaQuery>
      <MediaQuery maxWidth={767}>
        {/* 小屏专属布局内容 */}
      </MediaQuery>
    </Content>
  );
};

再配合CSS媒体查询控制显示：

/* 小屏隐藏视频播放器 */
@media (max-width: 767px) {
  .video-player {
    display: none;
  }
}

/* 根据你的断点需求，添加其他尺寸下的样式规则 */

2. 用父组件状态保存播放进度，组件重建时恢复 #

如果因为布局限制，必须把视频播放器放在MediaQuery的分支里，可以在父组件（比如Content组件）中保存视频的关键状态（当前播放时间、是否处于播放状态等），当视频组件重新挂载时，把这些状态传递进去，让它自动恢复之前的播放进度。

示例代码：

import { useState, useEffect } from 'react';
import { MediaQuery } from 'react-responsive';
import { Layout } from 'antd';
const { Content } = Layout;
import VideoPlayer from './VideoPlayer'; // 你的视频播放器组件

const AppContent = () => {
  // 保存视频播放状态
  const [videoPlayState, setVideoPlayState] = useState({
    currentTime: 0,
    isPlaying: false
  });

  // 接收视频组件传来的状态更新
  const handleVideoStateChange = (newState) => {
    setVideoPlayState(newState);
  };

  return (
    <Content>
      <MediaQuery minWidth={1200}>
        <div className="large-screen-layout">
          <VideoPlayer 
            initialTime={videoPlayState.currentTime}
            initialIsPlaying={videoPlayState.isPlaying}
            onStateChange={handleVideoStateChange}
          />
        </div>
      </MediaQuery>
      <MediaQuery minWidth={768} maxWidth={1199}>
        <div className="medium-screen-layout">
          <VideoPlayer 
            initialTime={videoPlayState.currentTime}
            initialIsPlaying={videoPlayState.isPlaying}
            onStateChange={handleVideoStateChange}
          />
        </div>
      </MediaQuery>
    </Content>
  );
};

然后在VideoPlayer组件中处理状态恢复：

import { useEffect, useRef } from 'react';

const VideoPlayer = ({ initialTime, initialIsPlaying, onStateChange }) => {
  const videoRef = useRef(null);

  // 组件挂载时恢复播放状态
  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.currentTime = initialTime;
      if (initialIsPlaying) {
        videoRef.current.play().catch(err => console.error(err));
      }
    }
  }, []);

  // 监听视频状态变化，同步到父组件
  useEffect(() => {
    const handleTimeUpdate = () => {
      onStateChange({
        currentTime: videoRef.current.currentTime,
        isPlaying: !videoRef.current.paused
      });
    };

    const handlePlayPause = () => {
      onStateChange({
        currentTime: videoRef.current.currentTime,
        isPlaying: !videoRef.current.paused
      });
    };

    const videoEl = videoRef.current;
    if (videoEl) {
      videoEl.addEventListener('timeupdate', handleTimeUpdate);
      videoEl.addEventListener('play', handlePlayPause);
      videoEl.addEventListener('pause', handlePlayPause);
    }

    // 组件卸载时移除监听
    return () => {
      if (videoEl) {
        videoEl.removeEventListener('timeupdate', handleTimeUpdate);
        videoEl.removeEventListener('play', handlePlayPause);
        videoEl.removeEventListener('pause', handlePlayPause);
      }
    };
  }, [onStateChange]);

  return <video ref={videoRef} src="your-video-source.mp4" controls />;
};

export default VideoPlayer;

3. 改用CSS-in-JS实现响应式，避免组件卸载 #

如果你使用styled-components、Emotion这类CSS-in-JS库，可以直接在组件样式中编写媒体查询，通过CSS控制布局变化，而不是用MediaQuery组件切换组件分支。这样整个布局组件不会被卸载重建，视频播放器的状态自然能保持。

示例（styled-components）：

import styled from 'styled-components';
import { Layout } from 'antd';
const { Content } = Layout;

const StyledContent = styled(Content)`
  .video-player {
    /* 默认样式 */
    width: 100%;
    margin-bottom: 1rem;
  }

  .layout-container {
    /* 默认布局样式 */
    display: flex;
    gap: 2rem;
  }

  /* 小屏适配 */
  @media (max-width: 767px) {
    .video-player {
      display: none;
    }
    .layout-container {
      flex-direction: column;
      gap: 1rem;
    }
  }

  /* 中屏适配 */
  @media (min-width: 768px) and (max-width: 1199px) {
    .layout-container {
      flex-direction: column;
      gap: 1.5rem;
    }
  }

  /* 大屏适配 */
  @media (min-width: 1200px) {
    .layout-container {
      flex-direction: row;
    }
  }
`;

const AppContent = () => {
  return (
    <StyledContent>
      <div className="video-player">
        {/* 你的视频播放器组件 */}
      </div>
      <div className="layout-container">
        {/* 通用布局内容，通过CSS适配不同尺寸 */}
      </div>
    </StyledContent>
  );
};

总结 #

优先推荐第一种方案，它不需要额外的状态管理，通过保持组件挂载从根源解决问题；如果布局结构特殊无法调整，第二种状态保存的方案可以实现播放状态的恢复；第三种CSS-in-JS的方式则更适合追求样式与组件耦合度的场景。

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