点击缩略图切换视频时出现UI弹跳问题求助

点击缩略图切换视频时，视频加载过程中会出现轻微的UI弹跳现象，我希望切换时视频框能保持位置对齐，但不清楚代码哪部分导致了这个问题。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main>
        <div class="video-container">
            <div class="main-video">
                <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>
                <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>
                <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 class="small-videos">
                <div class="video-item" data-video-id="main-video-2">
                    <img src="grass.png" alt="Grass video thumbnail">
                </div>
                <div class="video-item" data-video-id="main-video-3">
                    <img src="sunset.png" alt="Sunset video thumbnail">
                </div>
            </div>
        </div>
    </main>

    <div class="divider"></div>
    <footer>
        <p>&copy; 2024 My Name. All rights reserved.</p>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>

CSS代码 #

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f4f4f4;
    color: #333;
}

main {
    padding: 2rem 0;
    text-align: center;
}

.video-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.main-video {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin-bottom: 1rem;
}

.main-video video {
    width: 100%;
    transition: opacity 0.5s ease;
}

.main-video .hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.small-videos {
    display: flex;
    gap: 1rem;
    width: 80%;
    max-width: 900px;
    justify-content: space-between;
}

.small-videos .video-item {
    flex: 1;
    cursor: pointer;
}

.small-videos img {
    width: 100%;
}

.divider {
    width: 80%;
    max-width: 900px;
    height: 1px;
    background-color: #ddd;
    margin: 4rem auto 1rem;
}

footer {
    text-align: center;
    padding: 1rem 0;
}

footer p {
    margin: 0;
    color: #333;
}

@media (max-width: 768px) {
    .main-video {
        width: 100%;
    }

    .small-videos {
        flex-direction: column;
    }

    .small-videos .video-item {
        margin-bottom: 1rem;
    }

    .divider {
        width: 100%;
    }
}

JavaScript代码 #

document.addEventListener("DOMContentLoaded", function() {
    const mainVideos = document.querySelectorAll(".main-video-element");
    const smallVideos = document.querySelectorAll(".video-item");

    smallVideos.forEach(videoItem => {
        videoItem.addEventListener("click", function() {
            const newVideoId = this.getAttribute("data-video-id");
            const newVideoElement = document.getElementById(newVideoId);

            mainVideos.forEach(video => {
                if (video.id === newVideoId) {
                    video.classList.remove("hidden");
                    video.play();
                } else {
                    video.classList.add("hidden");
                    video.pause();
                }
            });
        });
    });
});

问题原因分析 #

弹跳现象的核心在于：

1. 视频容器尺寸不固定：.main-video仅设置了宽度，高度依赖视频内容加载后的自动计算。切换到未加载的视频时，浏览器需要等待视频元数据加载完成才能确定高度，导致容器短暂收缩后再扩展，引发弹跳。
2. 视频控件渲染延迟：视频的播放控件（如进度条、音量按钮）加载时机与视频内容不同步，短暂改变元素整体高度，加剧布局跳动。

修复方案 #

1. 给容器设置固定宽高比

通过内边距实现响应式视频容器，确保尺寸始终固定，不受视频加载状态影响（以16:9比例为例）：

.main-video {
    position: relative;
    width: 100%;
    max-width: 900px;
    /* 16:9比例计算：9/16 = 56.25% */
    padding-bottom: 56.25%;
    margin-bottom: 1rem;
    height: 0; /* 让内边距决定高度 */
}

.main-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease;
    object-fit: contain; /* 保持视频比例，避免拉伸 */
}

2. 预加载视频元数据

提前让浏览器加载视频的尺寸信息，避免切换时重新计算：

document.addEventListener("DOMContentLoaded", function() {
    const mainVideos = document.querySelectorAll(".main-video-element");
    const smallVideos = document.querySelectorAll(".video-item");

    // 预加载所有视频的元数据
    mainVideos.forEach(video => {
        video.load(); // 触发元数据加载，获取视频尺寸
    });

    smallVideos.forEach(videoItem => {
        videoItem.addEventListener("click", function() {
            const newVideoId = this.getAttribute("data-video-id");
            const newVideoElement = document.getElementById(newVideoId);

            mainVideos.forEach(video => {
                if (video.id === newVideoId) {
                    video.classList.remove("hidden");
                    video.play();
                } else {
                    video.classList.add("hidden");
                    video.pause();
                }
            });
        });
    });
});

3. 优化隐藏视频的样式

确保隐藏的视频元素始终占据容器空间，避免布局重排：

.main-video .hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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