视频切换时因元素尺寸动态变化导致页面布局重排，引发视觉“跳动”；通过为视频容器设置固定宽高并配合绝对定位，可彻底避免该问题。
视频切换时因元素尺寸动态变化导致页面布局重排，引发视觉“跳动”；通过为视频容器设置固定宽高并配合绝对定位，可彻底避免该问题。
在当前实现中，多个 <video></video> 元素被直接堆叠在 .main-video 容器内，且仅靠 opacity: 0 和 position: absolute 隐藏非活动视频。但关键问题在于：.main-video 容器本身未设置明确的高度，而每个 <video></video> 元素默认具有 display: inline-block 行内块行为，其自然高度会随视频资源加载、宽高比解析或 poster 帧渲染而波动——尤其当不同视频分辨率/长宽比不一致（如 1.mp4 vs sunset.mp4）时，浏览器会反复重绘容器高度，造成下方内容（如分隔线 .divider）上下位移，即用户观察到的“UI bounce”。
✅ 正确解法是：将所有视频包裹在统一尺寸的占位容器中，确保布局流稳定。
✅ 推荐修复方案（三步落地）
1. 修改 HTML 结构：为每个视频添加固定尺寸容器
<div class="main-video">
<div class="video-placeholder">
<video id="main-video-1" class="main-video-element" controls>
<source src="1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-placeholder">
<video id="main-video-2" class="main-video-element hidden" controls>
<source src="grass.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-placeholder">
<video id="main-video-3" class="main-video-element hidden" controls>
<source src="sunset.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>2. 更新 CSS：锁定占位容器尺寸与层叠逻辑
.main-video {
position: relative;
width: 100%;
max-width: 900px;
height: 506px; /* ✅ 关键：设为最大视频高度（如 16:9 → 900×506） */
margin-bottom: 1rem;
overflow: hidden;
}
.video-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main-video-element {
width: 100%;
height: 100%;
object-fit: contain; /* 或 cover，按需选择缩放策略 */
opacity: 1;
transition: opacity 0.3s ease;
}
.main-video-element.hidden {
opacity: 0;
pointer-events: none;
}? 提示：
height: 506px应根据你最高/最宽视频的实际尺寸设定（推荐统一使用 16:9 的56.25%响应式高度或固定像素值）。若需完全响应式，可用aspect-ratio: 16 / 9（现代浏览器支持）替代固定高度。
3. 优化 JS：移除冗余 DOM 操作，提升性能
smallVideos.forEach(videoItem => {
videoItem.addEventListener("click", function() {
const targetId = this.getAttribute("data-video-id");
// 一次性切换：隐藏全部 → 显示目标
mainVideos.forEach(video => {
video.classList.toggle("hidden", video.id !== targetId);
});
// 确保目标视频播放（自动触发加载）
const targetVideo = document.getElementById(targetId);
if (targetVideo) {
targetVideo.play().catch(e => console.warn("Autoplay prevented:", e));
}
});
});⚠️ 注意事项
-
不要依赖
visibility: hidden或display: none切换：前者保留空间但可能阻塞事件；后者会触发重排，破坏稳定性。 -
预加载建议：对缩略图对应视频添加
<link rel="preload" as="video" href="...">，减少首次点击延迟。 -
无障碍增强：为
.video-item添加role="button"和aria-label，例如<div class="video-item" data-video-id="main-video-2" role="button" aria-label="Play grass video">。<p>通过以上调整，<code>.main-video容器高度恒定，所有视频在相同坐标系内淡入淡出，UI 不再跳动——既保持了语义清晰的 DOM 结构，又达成了专业级的视觉稳定性。
