视频播放器底部控制条需用Flex垂直布局实现稳定贴底：外层container设flex-column和min-height:100vh，视频区flex:1撑满，控制条固定高度+flex横向弹性排布，并适配安全区与触控尺寸。
用 Flex 布局让视频播放器底部控制条“自适应”，关键不是让它随内容伸缩，而是让它**稳定贴底、高度固定、内部元素弹性排布**，同时确保主视频区域自动撑开剩余空间——不遮挡、不溢出、不跳动。
容器结构必须是垂直 column 布局
整个播放器外层需设为 display: flex; flex-direction: column;，并保证高度基准可靠：
-
html和body清除默认边距：margin: 0; padding: 0; - 给外层容器（如
.video-player）设min-height: 100vh;，而非height: 100vh，避免内容超长时截断 - 视频区域用
flex: 1;占满可用高度，自然把控制条“推”到底部
控制条本身要固定高度 + 水平弹性布局
底部控制条（.control-bar）不应设 flex: 1，而应明确高度（如 height: 56px; 或 60px），再用 Flex 横向管理内部按钮与滑块：
- 设
display: flex; align-items: center;实现垂直居中 - 用
justify-content: space-between;分隔播放按钮、进度条、音量/全屏等控件 - 进度条（
<input type="range">）加flex: 1; margin: 0 12px;，让它自动填满中间空隙
适配移动端触控与安全区域
在 iPhone 等设备上，底部控制条不能被系统手势栏遮挡：
- 给控制条容器加
padding-bottom: env(safe-area-inset-bottom);，留出安全区空间 - 若需完全贴底且不被遮盖，可设
margin-bottom: env(safe-area-inset-bottom);并配合父容器overflow: hidden; - 所有按钮和滑块的点击区域建议 ≥ 48×48px，图标+文字组合高度不低于 48px
防止内容溢出导致控制条上浮
常见错误是主视频区域用了 flex: 1，但内部包裹了未限制高度的元素（如 poster 图片、错误提示层），导致 flex 计算失准：
- 视频标签本身设
width: 100%; height: 100%; object-fit: contain;或cover - 封面图（
poster）、加载动画、错误提示层统一用position: absolute;叠加在视频上，不参与 flex 高度计算 - 禁用
overflow: visible，主容器加overflow: hidden;防止子项撑破布局
