PageSpeed提示用视频格式替代GIF，替换代码后无法正常显示求助

咱们一步步拆解可能导致视频无法加载播放的原因，逐个排查解决：

1. 先确认视频文件路径是否正确 #

你原来的GIF路径是assets/images/banner-gif.gif，但视频用的是video.webm和video.mp4——如果视频文件和GIF放在同一个目录下，路径必须改成assets/images/video.webm和assets/images/video.mp4，不然浏览器找不到文件，自然没法播放。

快速验证方法：直接在浏览器地址栏输入视频的完整URL（比如https://你的域名/assets/images/video.webm），看看能不能直接打开播放。如果打不开，肯定是路径或文件本身的问题。

2. 检查视频编码是否符合浏览器要求 #

WebM和MP4虽是主流支持格式，但编码不对浏览器也认不出来：

• WebM需使用VP8/VP9视频编码 + Vorbis/Opus音频编码（你加了muted，音频编码不重要，但视频编码必须正确）
• MP4需使用H.264视频编码 + AAC音频编码

可以用HandBrake这类工具重新转码，选择对应预设：

• 转WebM时选WebM格式，视频编码器选VP9
• 转MP4时选H.264编码器

3. 补充优化视频标签属性（适配浏览器兼容性） #

你的视频标签已经加了autoplay loop muted playsinline，但可以再补充一些属性避免兼容问题：

• 加上width和height，或者确保CSS给video标签（可以复用.bannerImg类）设置了正确尺寸，不然视频可能因0高度看起来像没加载
• 可选preload="auto"让浏览器提前加载视频内容（注意：这会影响首屏性能，按需选择）

修改后的参考代码：

<video autoplay loop muted playsinline preload="auto" class="bannerImg" width="1920" height="1080">
  <source src="assets/images/video.webm" type="video/webm">
  <source src="assets/images/video.mp4" type="video/mp4">
  <img src="assets/images/banner-gif.gif" alt="hero-banner" class="bannerImg">
</video>

4. 适配视频标签的CSS样式 #

原来的.bannerImg样式是给img标签写的，视频标签默认样式可能有差异，建议补充：

.bannerImg {
  display: block; /* 消除默认inline间隙 */
  width: 100%;
  height: auto;
  object-fit: cover; /* 和原GIF的缩放方式保持一致，比如cover/contain */
}

5. 用浏览器控制台定位错误 #

打开浏览器开发者工具（F12），切换到Console标签页，查看是否有404错误（文件找不到）或编码错误提示，这能直接定位问题核心。

如果以上步骤都试过仍未解决，可以补充控制台的错误信息或视频编码详情，方便进一步排查~

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