移动端视频自动播放时加载卡顿怎么办？

设计师洋辰提问于 2026-02-10 09:13:28 阅读 27

优化

我在给移动端页面加视频预览功能时，用了video标签自动播放，设置了muted和autoplay属性。但测试时发现视频加载特别卡，页面都卡成PPT了。

我尝试过把视频转成webm格式，还加了以下CSS控制宽高，但问题没解决：


.video-container {
  width: 100%;
  max-width: 320px;
  overflow: hidden;
}
video {
  width: 100%;
  object-fit: cover;
  vertical-align: middle;
}

用Lighthouse测发现”减少渲染 Blocking”项得分很低，但不知道具体怎么优化。有没有更有效的移动端视频加载方案？

我来解答赞 3 收藏

反馈

1 条解答

令狐诗谣 Lv1

应该是视频直接自动播放导致解码压力大，特别是移动端硬件限制明显。换成懒加载+点击播放，用 poster 预览帧占位。

<video 

  poster="preview.jpg" 

  muted 

  playsinline 

  preload="none"

  controls>

  <source src="video.mp4" type="video/mp4">

</video>

再加 JS 按需加载：

document.querySelector('video').load(); // 用户点击后再触发

2026-02-10 10:02