Chrome下HTML5视频仅通过链接访问才加载的问题求助

先理清楚你的问题：

你用这段HTML5视频做WordPress首页的循环背景：

<video class="primary-video-bg" autoplay loop preload="none"> 
  <source data-src="/wp-content/uploads/2018/01/45_Second_Advert.webm" media="(min-width: 640px)" src="wp-content/uploads/2018/01/45_Second_Advert.webm"> 
  <source data-src="wp-content/uploads/2018/01/45-Second-Advert.mp4" media="(min-width: 640px)" src="wp-content/uploads/2018/01/45-Second-Advert.mp4"> 
</video>

主题更新后出了个怪问题：Chrome里直接输地址访问首页，视频死活加载不出来；但从站内链接点过来，视频又能正常播放，其他浏览器没这毛病。

这个问题我碰到过好几次，基本都是主题更新引入的加载逻辑冲突，再加上Chrome的媒体策略限制导致的，给你几个一步步排查的方案：

1. 先排查懒加载的锅（最可能的原因） #

主题更新后十有八九加了媒体懒加载功能——就是把src换成data-src，等用户滚动或交互时才加载资源。但直接访问首页时，懒加载脚本可能没触发（比如页面刚加载时脚本没执行到位），而点击链接跳转时，主题可能用了AJAX局部加载，懒加载逻辑正常触发了。

怎么解决：

• 先去主题设置里找「性能」或「媒体」选项，看看有没有懒加载开关，把首页的视频排除在外（一般会有“排除特定类或ID”的选项，填你的视频类primary-video-bg就行）。
• 如果找不到设置，临时测试可以直接修改视频代码：把data-src的内容复制到src里，删掉data-src，同时把preload="none"改成preload="auto"——强制页面加载时就预加载视频：

  <video class="primary-video-bg" autoplay loop preload="auto"> 
    <source src="/wp-content/uploads/2018/01/45_Second_Advert.webm" media="(min-width: 640px)"> 
    <source src="/wp-content/uploads/2018/01/45-Second-Advert.mp4" media="(min-width: 640px)"> 
  </video>
  

  要是这样改了直接访问正常，那就是懒加载的问题没跑了。

2. 给Chrome的自动播放规则“让路” #

Chrome对自动播放管得特别严，必须满足用户有过页面交互，或者媒体是静音状态。你说点击链接访问正常，说明交互后规则放宽了，但直接访问时Chrome可能判定页面没有用户交互，拦截了视频加载。

快速解决：
给视频标签加个muted属性，Chrome允许静音媒体自动播放，这能绕过90%的自动播放限制：

<video class="primary-video-bg" autoplay loop muted preload="auto"> 
  <!-- 源文件路径按之前的改好就行 -->
</video>

如果你的视频本身就没有音频，加这个属性完全不影响体验；如果有音频，用户可以手动开启，至少能保证视频先加载出来。

3. 统一资源路径，避免缓存坑 #

注意你代码里的路径：第一个source的data-src是绝对路径（开头带/），但src是相对路径（没带/），直接访问首页时，相对路径可能解析错误（比如浏览器把它当成当前域名下的子路径，但实际位置不对），而点击链接时路径解析是对的。

修正方法：
把所有src都改成绝对路径（开头加/），确保不管怎么访问，资源路径都是对的：

<source data-src="/wp-content/uploads/2018/01/45_Second_Advert.webm" media="(min-width: 640px)" src="/wp-content/uploads/2018/01/45_Second_Advert.webm"> 
<source data-src="/wp-content/uploads/2018/01/45-Second-Advert.mp4" media="(min-width: 640px)" src="/wp-content/uploads/2018/01/45-Second-Advert.mp4"> 

另外，清一下Chrome的缓存（按Ctrl+Shift+Delete选“缓存的图片和文件”删除），避免浏览器存了旧的错误路径。

4. 检查主题的AJAX页面加载 #

有些主题更新后会启用AJAX页面加载（就是点击链接时不刷新整个页面，只加载内容），这种情况下，直接访问首页是全页刷新，视频的初始化脚本可能没执行；而点击链接是AJAX加载，脚本正常触发了。

解决办法：

• 先去主题设置里找“AJAX加载”或“单页模式”的开关，关掉它试试，如果问题消失，那就是这个原因。
• 如果必须用AJAX加载，就加一段自定义JS，强制在页面加载完成后初始化视频：

  // 用jQuery的话，加到主题的自定义JS里（外观→自定义→额外JS）
  jQuery(document).on('ready ajaxComplete', function() {
    // 把data-src的值移到src里
    jQuery('.primary-video-bg source').each(function() {
      const src = jQuery(this).attr('data-src');
      if (src) {
        jQuery(this).attr('src', src).removeAttr('data-src');
      }
    });
    // 重新加载视频
    const video = jQuery('.primary-video-bg')[0];
    if (video) video.load();
  });
  

按这个顺序排查，应该能解决问题。

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