官网放企业宣传片，怎么放才不拖慢打开速度

有家做环保设备的公司，找影视公司拍了条三分钟的宣传片，剪得挺好看，然后让技术直接放到首页，一打开就自动播放。他们在办公室的千兆网络里看，流畅得很。销售带着笔记本去客户那儿演示，用手机热点打开，等了十几秒还在转圈，场面有点尴尬。

视频确实是官网里最能体现实力的内容之一，但它也是页面里最重的东西。一条没处理过的 1080p 视频能有好几十兆，比整站的图片加起来还大。

首页第一屏的任务是让访客三秒内知道你是干什么的，然后引导他去点。视频放首页有个问题，用户根本没耐心等它加载完。

更合适的位置是「关于我们」或者「工厂实拍」这类页面。访客点进去的时候本来就有了解的意愿，愿意多等两秒。

如果老板坚持要放首页，那也别搁在第一屏正中间。往下放一点，用一张封面图顶着，用户想看点一下再播。

浏览器对自动播放的限制很严。想自动播放，视频必须是静音的，还得加 playsinline 属性，否则手机上会全屏弹出来。iPhone 开了低电量模式之后，自动播放还会直接失效。

另外自动播放意味着访客一进页面就开始消耗流量。手机用户看到流量在跑，第一反应是关掉，尤其是套餐不够用的人。

我的建议是默认不自动播放。封面图上放一个明显的播放按钮，点一下再加载。多一次点击，少好几秒等待，转化反而更好。

拿到手的原始素材一般是剪辑工程文件或者高码率视频，不能直接往网站上放，至少要过一遍转码。

格式选 MP4，编码用 H.264，兼容性最好，浏览器全认。时长控制在一分钟以内，宣传片三分钟的话，剪一版 45 秒的精简版放官网，完整版留给抖音或者视频号。

分辨率和码率上，1080p 够用，码率给到 2 到 4 Mbps。有人喜欢传 4K，说实话在手机和普通显示器上，1080p 和 4K 的差别肉眼看不出来，文件却大了四倍。

一条 45 秒的视频按这个参数压出来，大概 15 到 25 兆，这个体积对一段可点播的视频是能接受的。

这是最划算的一个改动。给 video 标签加上 poster 属性指定封面图，再设置 preload 为 none，浏览器一开始只加载那张封面图，几十千字节的事。

访客看到的是画面加一个播放按钮，视觉上和视频没区别。点下去才开始下载视频，几秒就能播。

对比一下：自动播放的话，访客一进页面就得下几十兆；用封面图，先下 100 千字节，想看才下。手机上差别非常明显。

一是传第三方视频平台，再把播放器嵌进页面。腾讯视频、B 站、YouTube 都行，带宽不用自己出，对方还会自动适配清晰度。缺点是页面上会有别人的水印和推荐内容，加载时要等对方的脚本，慢的时候页面上会空出一块。有些平台的广告跳转也挺烦人。

二是用对象存储放视频文件，再把链接填进播放器。视频流量走存储的带宽，不占服务器带宽，价格也便宜。视频比较多的官网适合这么干。

有些模板首页用一段循环短片当背景。这种视频没有声音，也不会有人仔细看，参数可以压得更激进：720p、码率 1 到 2 Mbps、时长 10 到 15 秒循环，压到 5 兆以内是合理的。

背景视频只在电脑端出现比较稳妥。手机屏幕小，背景视频意义不大还费流量，很多站直接在手机上换成一张静态图。

视频放哪个页面比怎么压更重要。首页第一屏留给产品和服务，宣传片挪到「关于我们」里，用封面图加点击播放代替自动播放，文件转成 1080p 的 MP4，这几步做完，页面一般不会因为视频变慢。