通过预创建多个video元素并利用css opacity过渡实现平滑切换，避免src动态替换导致的白屏闪烁，兼顾性能与用户体验。
通过预创建多个video元素并利用css opacity过渡实现平滑切换，避免src动态替换导致的白屏闪烁，兼顾性能与用户体验。
在构建作品集类视频展示页时，“点击缩略图无缝切换主视频”是核心交互体验。但如你所遇——仅靠 video.src = newSrc + load()/play() 的传统方式，浏览器会清空当前解码上下文、触发重新加载与首帧渲染，造成短暂黑屏或白屏（尤其在低网速或未缓存资源时），即所谓“屏幕闪烁”。这不是代码bug，而是 <video></video> 元素状态机的固有行为：load() 会重置 readyState 至 0（HAVE_NOTHING），强制丢弃已解码帧并重建媒体流水线。
根本解法不是优化单个video，而是放弃“复用一个video实例”的思维定式。我们采用多实例预加载 + 视觉层叠过渡策略，让切换发生在渲染层而非加载层：
✅ 推荐方案：双Video实例 + CSS淡入淡出
-
HTML结构改造：保留一个主容器，内含两个同尺寸、同控制逻辑的
<video></video>元素（#video-a和#video-b），默认仅显示其一（如#video-a），另一隐藏但保持预加载状态； -
JS逻辑升级：点击缩略图时：
- 暂停当前可见video；
- 将新视频源赋给隐藏中的video（此时它已在后台静默加载）；
- 待其
readyState >= 3（HAVE_FUTURE_DATA）且videoWidth > 0时，执行CSS过渡：降低当前video透明度，提升目标video透明度； - 切换完成后，将原video设为隐藏，并复用为下一次预加载容器。
<!-- 替换原 <div class="main-video"> --> <div class="main-video"> <video id="video-a" controls preload="metadata"></video><video id="video-b" controls preload="metadata" style="display:none;"></video> </div>
document.addEventListener("DOMContentLoaded", function() {
const videoA = document.getElementById("video-a");
const videoB = document.getElementById("video-b");
const smallVideos = document.querySelectorAll(".video-item");
// 当前活跃video引用（初始为A）
let activeVideo = videoA;
let inactiveVideo = videoB;
// 预加载首个视频（可选）
videoA.src = "cabo.mp4";
videoA.load();
smallVideos.forEach(videoItem => {
videoItem.addEventListener("click", async function() {
const newSrc = this.getAttribute("data-video-src");
// 若已是当前视频，不处理
if (activeVideo.src.endsWith(newSrc)) return;
// 暂停当前活跃video
activeVideo.pause();
// 将新src赋给非活跃video
inactiveVideo.src = newSrc;
inactiveVideo.load(); // 触发预加载
// 等待非活跃video具备可播放条件（关键！）
await waitForVideoReady(inactiveVideo);
// 执行CSS过渡（需提前定义CSS类）
activeVideo.classList.add("fade-out");
inactiveVideo.classList.remove("fade-out");
inactiveVideo.style.display = "block";
// 过渡完成后交换引用
setTimeout(() => {
activeVideo.classList.remove("fade-out");
activeVideo.style.display = "none";
[activeVideo, inactiveVideo] = [inactiveVideo, activeVideo];
}, 300); // 与CSS transition时间一致
});
});
});
// 工具函数：等待video达到稳定就绪状态
function waitForVideoReady(video) {
return new Promise((resolve) => {
const check = () => {
if (video.readyState >= 3 && video.videoWidth > 0) {
resolve();
} else {
requestAnimationFrame(check);
}
};
check();
});
}
/* styles.css 中追加 */
.main-video video {
width: 100%;
max-width: 900px;
border-radius: 8px;
margin-bottom: 1rem;
/* 统一绝对定位，避免布局抖动 */
position: absolute;
top: 0; left: 0;
transition: opacity 0.3s ease-in-out;
}
.main-video {
position: relative;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.main-video video:first-child {
z-index: 2;
}
.main-video video:last-child {
z-index: 1;
}
.fade-out {
opacity: 0;
}
⚠️ 注意事项与进阶建议
-
preload="metadata"是关键：它让浏览器仅加载视频头信息（时长、宽高、编码格式），不下载完整帧数据，大幅缩短预加载耗时，同时避免带宽浪费； -
务必校验
videoWidth > 0：仅靠readyState >= 3不足——某些H.264编码视频在HAVE_FUTURE_DATA时仍可能videoWidth === 0，此时截图或播放会失败； - 内存优化：若缩略图数量较多（>5），可维护一个3–4个video的池（Pool），按LRU策略复用，避免DOM节点无限增长；
-
移动端兼容性：iOS Safari对自动播放限制严格，首次切换后需用户手势触发播放（
play()返回Promise，需catch静音兜底）； -
无障碍支持：切换时应同步更新
aria-label与焦点管理，确保屏幕阅读器感知状态变更。
该方案将“加载延迟”完全隐藏在视觉过渡中，用户感知到的是流畅淡入效果，而非技术性卡顿。它不依赖第三方库，纯原生实现，兼具工程健壮性与可维护性——正适合作品集这类强调第一印象的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
