如何实现切换页面时视频不重新加载？求全站背景视频无刷新方案

1. 跨页面视频不重新加载的实现方式 #

传统整页刷新的场景下很难完全避免视频重载，可根据需求选择对应方案：

• 最低成本方案：把视频当前播放进度实时存入localStorage，新页面加载时直接读取进度跳转播放，虽然本质还是会重载视频，但用户体感接近无间断，不需要修改整体站点架构
• 完全无重载方案：把视频元素挂载到全局共享的顶层iframe或者SharedWorker容器中，所有子页面跳转时顶层容器不刷新，就能一直保留视频播放实例

2. 无需子页面的内容切换方案（最优推荐） #

该方案完全不需要跳转子页面，自然不会触发视频重载，非常适合简单站点、菜单切换类场景：

核心逻辑 #

整站仅用一个HTML文件，所有内容模块（首页、不同菜单页、功能页）都写在独立容器中，通过JS控制显隐切换，背景视频固定在页面最底层全程不参与内容切换。

基础代码示例 #

<!-- 全局背景视频，永远不会被销毁 -->
<video id="bgVideo" autoplay muted loop style="position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;z-index:-1;">
  <source src="your-video-path.mp4" type="video/mp4">
</video>

<!-- 内容模块组 -->
<div class="content-module active" id="home">首页内容</div>
<div class="content-module" id="menu1">菜单1内容</div>
<div class="content-module" id="menu2">菜单2内容</div>

<!-- 切换导航 -->
<nav>
  <button data-target="home">首页</button>
  <button data-target="menu1">菜单1</button>
  <button data-target="menu2">菜单2</button>
</nav>

.content-module {
  display: none;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  /* 可加过渡动画优化体验 */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.content-module.active {
  display: block;
  opacity: 1;
}

const allModules = document.querySelectorAll('.content-module')
const navBtns = document.querySelectorAll('nav button')

navBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const targetId = btn.dataset.target
    // 隐藏所有模块
    allModules.forEach(mod => mod.classList.remove('active'))
    // 显示目标模块
    document.getElementById(targetId).classList.add('active')
  })
})

• 如果需要支持浏览器前进后退功能，可以搭配History API的pushState方法修改地址栏，监听popstate事件处理回退逻辑，和真实多页站的浏览体验完全一致
• 简单菜单切换场景可以进一步简化逻辑，仅需要给目标菜单和当前菜单做显隐切换即可，不需要复杂的路由处理

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