如何用React实现四屏视频布局：调整单视频尺寸其余自动适配

你用SplitterLayout的思路完全可行，只需要把占位容器替换为视频组件，并确保视频能自适应父容器的尺寸变化，就能实现调整一个视频大小、其余自动适配的效果。

步骤1：替换占位容器为视频组件 #

将原有代码中的彩色div替换为video标签（或自定义视频组件），并给视频添加自适应样式，保证视频能随容器尺寸变化而调整，同时保持比例不拉伸：

import SplitterLayout from 'react-splitter-layout';
import 'react-splitter-layout/lib/index.css'; // 记得引入组件样式

const VideoGrid = () => {
  return (
    <SplitterLayout percentage secondaryInitialSize={50}>
      {/* 左半部分 */}
      <SplitterLayout vertical percentage secondaryInitialSize={50}>
        <div className="h-full p-4">
          <video 
            src="你的视频地址1" 
            controls 
            className="w-full h-full object-contain"
          />
        </div>
        <div className="h-full p-4">
          <video 
            src="你的视频地址2" 
            controls 
            className="w-full h-full object-contain"
          />
        </div>
      </SplitterLayout>
      {/* 右半部分 */}
      <SplitterLayout vertical percentage secondaryInitialSize={50}>
        <div className="h-full p-4">
          <video 
            src="你的视频地址3" 
            controls 
            className="w-full h-full object-contain"
          />
        </div>
        <div className="h-full p-4">
          <video 
            src="你的视频地址4" 
            controls 
            className="w-full h-full object-contain"
          />
        </div>
      </SplitterLayout>
    </SplitterLayout>
  );
};

export default VideoGrid;

关键细节说明 #

• object-contain属性：保证视频按原始比例填充容器，不会出现拉伸变形；如果需要视频铺满容器（允许裁剪），可以换成object-cover。
• percentage属性：开启后，Splitter的尺寸按父容器百分比分配，拖拽调整时所有子容器会自动联动适配剩余空间。
• 组件样式引入：必须引入react-splitter-layout的默认样式，否则拖拽条会显示异常。

额外优化建议 #

• 如果使用自定义视频组件（比如封装了播放逻辑的组件），确保组件内部的video元素继承父容器的宽高（设置width: 100%; height: 100%;）。
• 若需要初始非等分布局，修改secondaryInitialSize的值即可（比如设置为30，则右侧/下侧容器占30%空间）。

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