Chrome页面加载时视频自动播放失效，需多次刷新才可播放

咱们先拆解下你遇到的问题根源：

问题原因分析 #

1. Chrome严格的自动播放政策：Chrome和Firefox对自动播放的规则差异很大，Chrome默认会阻止无用户交互的带声音视频自动播放。你通过链接跳转时，用户有点击链接的交互行为，浏览器会放行播放；但刷新页面时没有新的用户交互触发，就会触发这个限制，导致视频直接停止。
2. 视频加载时机不匹配：你的代码依赖$(document).ready()执行逻辑，但这个事件仅表示DOM结构加载完成，视频资源可能还没加载就绪就调用了play()。Firefox对这种情况容错性更高，但Chrome会直接拒绝播放请求。而你刷新两次能播放，大概率是第二次刷新时视频已被缓存，加载速度快，刚好满足播放条件。
3. 过早执行播放代码：你在HTML里直接嵌入的<script> $('#vid')[0].play() </script>，可能在视频元素还没完全初始化、甚至DOM还没解析完成时就执行了，导致播放请求被浏览器拦截。

针对性修复步骤 #

1. 满足Chrome自动播放的核心条件 #

给视频标签添加muted和playsinline属性，这是Chrome允许自动播放的关键：

<video id="vid" autoplay loop muted playsinline class="fillWidth">
  <source src="video/video1.mp4" type="video/mp4" />
  <source src="video/video1.webm" type="video/webm" />
</video>

• muted：让视频静音，直接符合Chrome的自动播放规则（无用户交互时，静音视频允许自动播放）
• playsinline：解决移动端视频自动全屏的问题，同时提升桌面端播放的兼容性

2. 优化播放时机，确保视频资源就绪 #

把播放逻辑放到视频资源加载完成的事件中，而非依赖DOM就绪事件。修改你的JS代码：

$(document).ready(function() {
  scaleVideoContainer();
  initBannerVideoSize('.video-container .poster img');
  initBannerVideoSize('.video-container .filter');
  initBannerVideoSize('.video-container video');

  // 监听视频加载完成事件，再尝试播放
  const videoElement = $('#vid')[0];
  videoElement.addEventListener('canplaythrough', function() {
    if (videoElement.paused) {
      // 用catch捕获播放失败的情况，做降级处理
      videoElement.play().catch(error => {
        console.log('自动播放失败:', error);
        // 显示海报图，让用户点击手动播放
        $('.poster').removeClass('hidden');
        $('.poster').on('click', function() {
          videoElement.play();
          $(this).addClass('hidden');
        });
      });
    }
  });

  $(window).on('resize', function() {
    scaleVideoContainer();
    scaleBannerVideoSize('.video-container .poster img');
    scaleBannerVideoSize('.video-container .filter');
    scaleBannerVideoSize('.video-container video');
  });
});

• canplaythrough事件：表示视频已加载到足够流畅播放的程度，此时调用play()成功率最高
• 加入catch处理：如果因浏览器政策更新等极端情况播放失败，就显示海报图让用户手动触发播放，保证基础用户体验

3. 移除冗余的播放代码 #

删掉HTML里直接写的<script> $('#vid')[0].play() </script>，这段代码是问题的诱因之一，它会在视频元素未就绪时就发起播放请求，被浏览器拦截。

总结 #

做完这些修改后，Chrome里刷新页面时视频应该能正常自动播放了，同时也兼顾了其他浏览器的兼容性。如果还有极端情况（比如用户浏览器禁用了自动播放），降级的海报图点击播放也能保证用户能看到视频内容。

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