这个问题我碰到过好几次，核心原因其实是Chrome的自动播放策略限制，再加上你一开始把视频设为display:none的操作刚好踩了坑——Chrome会对初始不可见的视频元素禁用自动播放，而打开DevTools时浏览器会临时放宽这类限制方便调试，所以才会出现只有开DevTools刷新才能播放的情况。

下面是具体的修复方案：

1. 调整视频元素的初始隐藏方式 #

不要用display:none来隐藏视频，改用opacity: 0或者visibility: hidden，这样浏览器会认为元素处于“存在但不可见”的状态，后续切换可见时能正常触发自动播放逻辑。

修改后的CSS：

#vid1 { 
  opacity: 0; 
  visibility: hidden;
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  padding-top: 480px; 
  z-index: 1; 
} 
#vidSub { 
  display:block; 
  width:100%; 
  height:auto; 
  max-width:100%; 
} 

@media only screen and (min-width: 992px) { 
  #vid1 { 
    opacity: 1;
    visibility: visible;
  } 
  #vidSub { 
    display: none; 
  } 
} 

#videoDiv { 
  width: 100%; 
  max-width:992px; 
  margin:auto; 
  display:block; 
  position: relative; 
  z-index: 2; 
  background: transparent; 
}

2. 优化视频标签的自动播放属性 #

Chrome的自动播放策略要求视频静音才能在无用户交互时自动播放，所以给视频标签加上muted和playsinline属性（移动端也需要playsinline避免强制全屏）：

修改后的HTML：

<div id="videoDiv"> 
  <div id="videoBlock"> 
    <img src="" id="vidSub"> 
    <video preload="auto" id="vid1" autoplay loop muted playsinline> 
      <source src="images/solPromo.mp4" type="video/mp4">
    </video> 
  </div>
</div>

注意：preload="preload"是无效值，应该用preload="auto"让浏览器预加载视频内容；autoplay="autoplay"可以简化为autoplay，HTML5布尔属性只需要写属性名即可。

3. 用JS兜底监听媒体查询变化（可选） #

如果上面的调整还是有问题，可以用JavaScript监听媒体查询的状态变化，当视频变为可见时手动触发播放：

const video = document.getElementById('vid1');
const mediaQuery = window.matchMedia('(min-width: 992px)');

function handleMediaQueryChange(e) {
  if (e.matches) {
    // 当屏幕宽度达到992px时，播放视频
    video.play().catch(err => {
      console.log('播放失败:', err);
      // 如果还是失败，可能需要引导用户点击后播放
    });
  } else {
    video.pause();
  }
}

// 初始检查状态
handleMediaQueryChange(mediaQuery);
// 监听屏幕尺寸变化
mediaQuery.addEventListener('change', handleMediaQueryChange);

为什么之前的方法无效？ #

• display:none会让浏览器完全跳过该元素的渲染和资源加载逻辑，即使后续改为display:block，浏览器也不会自动恢复自动播放，除非有用户交互或者调试模式下的限制放宽。
• 没有添加muted属性，Chrome的自动播放策略默认阻止非静音视频的自动播放（除非用户之前和页面有过交互）。

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