如何在落地页添加产品视频（自动播放、文件大小、位置）

作者：Ivan Cernja · 2026年10月11日

放在落地页顶部附近的产品视频，能让访客在读到任何文字之前就看到你在做什么。要让它在所有地方都能自动播放、又不拖慢页面，需要做几个具体的选择，一旦了解浏览器的规则，这些都不难。

选择方式

自动播放规则

Chrome 的政策很简短：“静音自动播放始终是允许的”，而有声自动播放则需要满足一些条件，比如用户之前与网站有过互动（Chrome for Developers）。MDN 描述了各浏览器通用的同一条规则，并指出 Safari 还需要 playsinline 属性才能自动播放（MDN Web Docs）。所以首屏循环视频必须设为 muted 和 playsinline，有声视频则应等用户点击后再播放。Chrome 的指南还提醒，不要假定视频一定会播放，视频没在播放时也不要显示暂停按钮（Chrome for Developers）。

HTML 代码

<video src="/product.mp4" poster="/product.jpg"
  autoplay muted loop playsinline preload="metadata"></video>

封面图（poster）会在视频加载时立即显示，preload="metadata" 则让浏览器在需要之前不会下载整个文件。本页侧边卡片里的视频用的也是同样的代码。

保持轻量

• 用视频，不用 GIF。在 web.dev 的例子中，一个 3.7 MB 的 GIF 转成 MP4 后是 551 KB，转成 WebM 后是 341 KB（web.dev）。
• 去掉静音循环视频的音轨，并把尺寸缩放到实际显示的大小。用 ffmpeg 的话，类似 ffmpeg -i video.mp4 -an -vf scale=1280:-2 -c:v libx264 -crf 26 -preset slow -movflags +faststart hero.mp4 的命令，通常能把一段 30 秒的循环视频压到几 MB。
• 较长的有声视频交给视频托管平台，比如 Wistia、Vimeo 或 YouTube，这样自适应码流和播放控件都是现成的。

位置和时长

• 保持标题可见。视频应该衬托标题，而不是在笔记本屏幕上把它挤到首屏以下。
• 画面比例设为 16:9，在手机宽度下也不要裁掉重要内容。
• 循环视频要短。在 Wistia 的数据中，一分钟以内的视频互动率最高（Wistia），而短于 30 秒的循环视频很少让人觉得重复。

获取视频

如果你还没有视频，Teasr 可以根据你的落地页在大约 10 分钟内做出一段 1920 x 1080 的 MP4，€19.50 起，使用你的品牌风格和真实界面。视频自带音乐，做静音循环时可以用上面的命令去掉音轨。