页面里放了个宣传片，代码写完在电脑上正常播放，发到手机上，iPhone 一点就全屏，退出按钮还盖住内容。这是 video 标签少了 playsinline。

最小可用的一段

<video src='promo.mp4' controls poster='cover.jpg' preload='metadata' playsinline></video>

controls 是播放控件，不写就只能靠脚本控制。poster 是第一帧之前显示的图，不设的话是一片黑，用户以为没加载出来。preload 用 metadata 只拉时长和尺寸，省流量；设成 auto 会在打开页面时就把整个视频下下来。

自动播放的条件

带声音的自动播放，Chrome 和 Safari 基本都拦。想让它自己播，必须加 muted，而且多数浏览器还要求用户和页面有过交互。autoplay、muted、playsinline 三个一起上，少一个都不稳。

当背景用的话，再加上 loop，去掉 controls，配合 object-fit: cover 铺满容器，窗口怎么缩放都不会变形。

格式和兼容

  • mp4 加 H.264 编码兼容性最好，Safari 和安卓都认。
  • 需要更高压缩率再补一份 webm，用多个 source 按顺序给，浏览器自己挑第一个能播的。
  • 视频放在 CDN 且和页面不同域，要开 CORS，否则截帧会失败。

宽度别写死像素。外层给个容器，video 设 width 100% 加 height auto，横竖屏切换都不会撑破布局。竖屏视频在手机上是常态，桌面端记得限制最大高度，不然一屏全是画面。

文件建议压到 5MB 以内。首页挂超过十兆的视频，移动网络下多半等不到开始播用户就退出去了。真要放大的，先放封面图，点了再加载，体验好很多。

还有一处容易踩：视频用 H.265 编码时，Chrome 在 Windows 上常常放不出来，画面黑着却有声音。转成 H.264 最稳，想保留高清再单独给一份高码率的。