我刚实测了你的站点，确实只有Chrome会在切换标签页时把视频的CSS display 属性设为 none，其他浏览器（Safari、Firefox）都正常。这个问题的核心原因是Chrome的后台标签资源节流机制——为了降低后台标签对内存、CPU的消耗，Chrome会自动对媒体元素做优化处理，视频这类高资源消耗的元素首当其冲。

可能的原因分析 #

Chrome的标签页休眠机制会在标签进入后台后，对页面内的非关键资源进行限制，包括暂停视频渲染、调整元素样式等。如果你的站点没有针对这个机制做适配，就可能出现视频被意外隐藏的情况。另外也需要排查是否是站点自定义脚本监听了标签页可见性事件，主动触发了隐藏逻辑。

具体解决方案 #

1. 监听标签页可见性，手动恢复视频显示 #

利用浏览器的visibilitychange事件，监听标签页从后台切换回前台的动作，手动恢复视频的显示状态。建议先记录视频初始的display值，避免硬编码导致样式冲突：

// 页面加载时记录视频初始display样式
const videoElement = document.querySelector('你的视频元素选择器');
const originalDisplay = videoElement.style.display || getComputedStyle(videoElement).display;

// 监听标签页可见性变化
document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    // 切回前台时恢复视频的原始显示状态
    videoElement.style.display = originalDisplay;
  }
});

2. 排查站点自定义脚本 #

检查你的代码中是否存在监听pagehide、visibilitychange事件并隐藏视频的逻辑。比如类似下面的代码：

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    videoElement.style.display = 'none';
  }
});

如果有这类逻辑，可以调整触发条件，比如仅在视频暂停时才隐藏，或者增加判断避免和Chrome的自动优化冲突。

3. 调试时禁用Chrome后台标签节流（仅开发环境） #

如果你只是想验证问题是否由Chrome的节流机制导致，可以在Chrome地址栏输入chrome://flags/#automatic-tab-discarding，将该选项设置为Disabled，重启Chrome后测试。但这个方法仅适合调试，不能要求普通用户这么操作。

额外提示 #

Chrome的资源节流逻辑会随版本更新调整，建议将Chrome升级到最新版本，看看是否是旧版本的已知bug。不过从实测来看，最新版Chrome仍存在这个行为，所以核心还是要通过代码适配来解决。

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