移动端视频加载卡顿，自动播放设置有问题吗？

Air-芸倩提问于 2026-02-10 02:48:27 阅读 24

优化

折腾了好几天移动端视频优化，发现视频在iPhone上加载特别卡顿，而且自动播放时偶尔会黑屏。我按照网上的方法设置了poster和muted，但效果不好。这是我的代码：


<video 
  class="video-container" 
  autoplay 
  muted 
  loop 
  poster="/img/preview.jpg">
  <source 
    src="/videos/main.mp4" 
    type="video/mp4" 
    sizes="(max-width: 640px) 320px, (max-width: 1024px) 640px, 1024px">
</video>

我试过把视频转成webm格式和降低分辨率，但加载速度没明显改善。iOS系统是不是对视频格式有特殊要求？或者懒加载应该用IntersectionObserver而不是直接写autoplay属性？

视频优化资源优化

我来解答赞 6 收藏

反馈

1 条解答

子璐 Lv1

先检查一下你的视频编码参数，iOS对H.264的baseline profile支持最好，很多人用H.265或者high profile就会卡。你可以用ffmpeg查一下：

ffprobe -v error -select_streams v:0 -show_entries stream=profile,width,height,codec_name -of json your-video.mp4

如果profile不是Baseline，转一下：

ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -level 3.0 -pix_fmt yuv420p -b:v 800k -movflags +faststart output.mp4

注意加了-movflags +faststart，这个很重要，把moov atom移到文件头，不然移动端要等整个视频下载完才播。

然后你代码里只写了autoplay和muted，但iOS Safari现在要求更严格，建议加上playsinline：

<video autoplay muted loop playsinline poster="/img/preview.jpg">

黑屏多半是没加playsinline导致的，它会让视频在页面内播放而不是跳全屏。

至于懒加载，别指望IntersectionObserver解决加载慢的问题。你现在应该先把视频尺寸降下来，320px宽的图没必要放1024px的视频源。source标签上写的sizes属性是给picture用的，video不认这个，删掉没用。

最后一步，真机测试时打开Safari的Web检查器，看下network面板里视频是不是分段加载的。如果不是，说明服务器不支持range request，那再怎么优化前端都没用。

2026-02-10 03:01