报价单里多出一项“移动版剪辑”时,采购方常把它理解成把横版裁窄。官网产品视频需要单独做手机版吗,真正要看的是视频放在首屏、详情区还是独立落地页,以及手机上被裁掉以后,产品动作和购买理由还剩多少。

这篇文章适合正在改版官网、准备拍新品主片,或手里已有一条 16:9 母版却不确定能否直接上手机端的品牌与采购团队。读完后,你可以在“一条母版响应式裁切”和“另剪移动版”之间做出选择,并把新增镜头、剪辑版本、海报帧和上线测试写进同一份制作范围。

把问题拆成三个页面位置,而不是两个屏幕尺寸

桌面端和手机端只是设备结果,先决定视频在页面里承担什么任务。首屏通常要在很短时间内交代产品类别或品牌气质;详情区可以配合上下文解释一个功能;广告落地页则往往只围绕一次点击后的单一承诺。即使三处都在手机上打开,所需节奏也不相同。

最直接的预检,是让开发把页面原型缩到约 375 像素宽,再把现有 16:9 画面分别放进三个位置。不要先看“能不能铺满”,而要检查四件事:产品是否还完整、动作起点和结果是否同时可见、画面里的必要字幕有没有进入安全区、第一帧能不能在视频尚未播放时独立成立。只要其中两项需要重新安排,单纯裁切通常已经不够。

web.dev 的响应式网页设计说明把响应式设计定义为让布局随用户与设备能力调整。对影像采购来说,这意味着不能只交一条固定构图,期待网页自动解决所有观看差异;页面容器改变后,画面的阅读顺序也要重新检查。

方案 A:一条母版加响应式裁切,适合信息集中型画面

当产品始终靠近画面中心、关键动作发生在中间区域、没有横跨画面的长字幕,而且首尾节奏在裁窄后仍然成立,可以保留一条主母版,由开发按容器做响应式显示。这个方案的采购重点不是再剪一条完整影片,而是拍摄时为横向和竖向窗口留下共同可用区。

现场可以在监看画面上同时叠加 16:9 与竖向参考框。比如一台无品牌桌面设备需要完成开盖、放入物料、亮灯三个动作,机身和操作手都尽量留在中央区域;开盖方向不要越过竖向框,指示灯也不要贴近横版边缘。每个动作前后各多留一至两秒,后期才能在不同容器里重新选择入点和出点,而不是被原剪辑的转场锁死。

这种做法还要准备一张专用海报帧。它不是从高速运动中随便截取,而是在产品表面、手部位置和背景反光都整理好以后单独留拍。视频未开始、网络较慢或用户选择减少动态时,海报帧仍能接住页面信息。它属于网页视频交付的一部分,不应到上线前才临时补。

方案 B:单独剪手机版,适合动作和阅读顺序改变的页面

如果横版靠左右关系讲故事,例如左侧旧产品、右侧新产品,或人物先看左边再走向右边,裁成窄画面后会丢失比较关系。又或者核心功能需要横向移动、字幕与产品分居两侧、镜头同时展示主机和配件,这些内容在手机上往往要重新排序。此时独立移动版不是“多导出一个尺寸”,而是一次新的镜头组织。

移动版可以先给结果,再补过程;横版则保留环境和动作铺垫。比如桌面母版用六秒完成“空间—人物—产品—功能”的进入,移动版可在第一秒先出现产品结果,第二个镜头再交代人物操作。两版共用拍摄素材,但镜头长度、切点、字幕位置和音乐重拍点不同。采购时应把它写成独立剪辑版,而不是普通转码。

浏览器行为也会影响首镜选择。Chrome 的自动播放政策说明静音自动播放通常可用,而有声自动播放取决于用户互动等条件。因此移动版的开头不能依靠一句旁白才看懂;即使声音没有启动,第一组画面也应交代产品和动作结果。

同一次拍摄怎样同时保住横版与竖向窗口

决定另剪手机版,不代表一定要把整天拍摄重复一遍。更有效的安排,是在分镜阶段给镜头标记“共用”“横版专用”和“移动版补拍”。共用镜头保证产品主体与手部动作都能进入两个参考框;横版专用镜头负责空间关系;移动版补拍只处理无法裁切的关键动作。

三个一线细节尤其值得提前确认。第一,产品功能复位要按版本顺序安排:先拍需要连续动作的共用镜头,再补近景,避免样机发热、耗材减少或界面状态不同。第二,手模动作要沿产品纵深方向完成,尽量少做横跨画面的长距离移动。第三,涉及屏幕或指示灯时,要在竖向参考框内留出可读尺寸,并拍一条亮度与刷新状态稳定的备用镜头。

摄影组还应留一组没有文字的干净画面,让网页端文案能在不同宽度下重新排版。若把卖点字幕直接烧进横版成片,移动端很容易出现字体过小或字幕压住产品的问题。需要多语言时,优先交付无字母版、字幕文件与各语言网页版本,而不是让每种语言重新套一次整条影片。

手机版不等于重拍:把新增范围限定在四项

两种方案的价差,主要来自新增制作工作,而不是“手机端”三个字。报价可拆成四项:是否增加移动版专用分镜,现场是否补拍竖向构图,后期是否独立重组节奏,以及是否需要不同码率、海报帧和文件命名。这样采购方能看到钱花在哪,也能删掉没有实际用途的重复交付。

web.dev 关于 video 与 source 标签的资料说明网页可以为视频提供不同格式来源,并建议准备海报图、处理预加载等配置。这些属于开发实现,但制作方应配合交出可测试的网页文件,而不是只交高码率归档母版。归档母版保留后续改剪空间,网页播放文件则按实际页面和服务器方案压缩,两者用途要在交付表中分开。

如果项目已有横版素材,可以先做一次小范围适配测试:挑三条最难裁的镜头,试出移动版节奏和字幕位置,再决定是否补拍。若试剪能保住信息,就不必扩大拍摄;若核心动作始终出框,再把补拍限定在这些镜头。这样比一开始就订购两套完整拍摄更可控。

用上线测试决定采购哪一种版本

最终选择可以落到一次真实页面测试。首屏分别检查无声第一秒、产品主体和页面标题是否互相遮挡;详情区检查用户滚动到视频时,海报帧与上下文是否衔接;落地页检查播放完成后,下一步按钮仍然可见。桌面宽屏、常见手机宽度和较窄手机各测一次,不要只在剪辑软件里看导出文件。

自动运动还需要留出暂停方式。W3C 的 WCAG 2.2 快速参考指出,自动开始、持续超过五秒并与其他内容同时出现的移动内容,应提供暂停、停止或隐藏机制,除非这种运动不可缺少。影像团队不负责网页控件开发,但应提供能被暂停、能以海报帧替代、不会把全部信息藏在运动里的素材。

验收时可用一句话判断:裁切后若产品、动作结果和阅读顺序都没变,就采用一条母版加响应式显示;只要阅读顺序发生变化,就另剪移动版。前者把预算放在双画幅构图和网页文件,后者把预算放在专用镜头、重新剪辑与独立审片。两种都比“先交横版,上线时再想办法”更省返工。

ONCE 的品牌视频与内容资产解决方案可承接从页面任务、拍摄到多版本交付的完整制作;商业影像案例合集可用于确认不同产品与场景的构图方式。若还在讨论首屏播放行为,可补充阅读官网首页视频自动播放与兜底画面的拆解,它回答声音、循环和播放失败后的处理,本篇则只处理手机版是否独立制作。

如果你的官网正在改版,欢迎把桌面与手机页面原型、现有母版、视频位置和上线日期发给 ONCE,我们会据此拆出共用镜头、移动版补拍、剪辑版本与验收文件。