视频切换时因尺寸未预留导致容器高度塌缩或重排，引发视觉“跳动”；通过为每个 video 元素包裹固定宽高的容器，并统一控制显隐逻辑，即可彻底消除 ui 抖动。
视频切换时因尺寸未预留导致容器高度塌缩或重排，引发视觉“跳动”；通过为每个 video 元素包裹固定宽高的容器，并统一控制显隐逻辑，即可彻底消除 ui 抖动。
在当前实现中，多个 <video></video> 元素被直接并列置于 .main-video 容器内，且仅靠 opacity: 0 + position: absolute 隐藏非活动视频。但关键问题在于：被隐藏的 <video></video> 元素虽不可见，却仍可能影响文档流（尤其当 position: absolute 未严格生效或父容器未设 position: relative）；更重要的是，未加载的视频初始无尺寸信息，浏览器无法为其预留空间——当新视频加载、解析元数据并首次渲染时，其固有宽高会触发父容器重排（reflow），造成下方元素（如分隔线、页脚）瞬间下移再回弹，即你观察到的“UI bounce”。
✅ 正确解法是：为每个视频提供尺寸锚点（sizing anchor） —— 即用固定宽高的包裹容器统一承载所有视频，确保布局稳定性。
✅ 推荐重构方案
1. HTML 结构优化（关键）
将每个 <video></video> 封装进一个具有明确宽高和 position: relative 的容器中，并保持仅一个视频可见：
<div class="main-video">
<div class="video-wrapper" style="width: 100%; height: 56.25vw; max-height: 500px; position: relative;">
<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-wrapper" style="width: 100%; height: 56.25vw; max-height: 500px; position: relative;">
<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-wrapper" style="width: 100%; height: 56.25vw; max-height: 500px; position: relative;">
<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>?
height: 56.25vw是 16:9 视频的响应式高度（9/16 = 0.5625），配合max-height防止过大屏幕下过度拉伸，兼顾响应性与稳定性。
2. CSS 调整（强化布局控制）
.main-video {
position: relative;
width: 100%;
max-width: 900px;
margin-bottom: 1rem;
}
.video-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.main-video-element {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #000;
transition: opacity 0.3s ease;
}
.main-video-element.hidden {
opacity: 0;
pointer-events: none;
}⚠️ 注意：.main-video 必须设 position: relative，否则子级 absolute 会脱离预期定位上下文。
3. JavaScript 逻辑微调（更健壮）
document.addEventListener("DOMContentLoaded", function() {
const videoWrappers = document.querySelectorAll(".video-wrapper");
const mainVideos = document.querySelectorAll(".main-video-element");
const smallVideos = document.querySelectorAll(".video-item");
smallVideos.forEach(videoItem => {
videoItem.addEventListener("click", function() {
const targetId = this.getAttribute("data-video-id");
// 隐藏全部
mainVideos.forEach(v => v.classList.add("hidden"));
// 显示目标
const targetVideo = document.getElementById(targetId);
if (targetVideo) {
targetVideo.classList.remove("hidden");
// 可选：预加载以减少首帧延迟
targetVideo.load();
targetVideo.play().catch(e => console.warn("Autoplay prevented:", e));
}
});
});
});? 补充说明与最佳实践
-
避免依赖
display: none切换：它会完全移除元素渲染，导致尺寸重计算；opacity + pointer-events+ 固定容器是更平滑的选择。 -
预加载建议：在页面加载时对所有视频调用
.load()（或设置preload="metadata"），可显著减少切换时的空白期与尺寸抖动。 -
无障碍考虑：切换后应聚焦到新视频，便于键盘用户操作（
targetVideo.focus()）。 - 性能提示：若视频较多，可结合 Intersection Observer 懒加载非可视视频，平衡初始加载与内存占用。
通过以上结构化改造，所有视频始终占据相同布局空间，切换仅改变透明度与播放状态，UI 不再发生任何位移或跳动——真正实现丝滑、专业级的视频画廊体验。
