Stock Video 首屏与背景治理

大理论

真实视频素材能比抽象渐变更快建立地点、行业、情绪和人群线索，但它也是最高风险的素材类型之一：视频里可能包含人物肖像、品牌、商标、私有财产、地标、音乐、AI 生成痕迹和平台自定义条款。首屏视频还会影响 LCP、移动流量、阅读对比、注意力和无障碍。素材库入库不能只写“可商用 stock video”，必须把法律边界和前端播放契约一起记录。

小知识点

1. 先定义视频角色：hero 背景、b-roll、产品证据、案例讲述、社交广告草案、Zoom 背景或纯 moodboard。角色不同，授权和实现要求不同。
2. 授权按具体视频页确认：Coverr 是自定义许可，当前许可页要求免费用户给 creator 或 Coverr 署名，并禁止 AI 训练/数据集和竞争服务；Mixkit 有 Free License 与 Restricted License，不能按平台整体商用。
3. 版权之外还有第三方权利：可识别人物、品牌、商标、私有地点、建筑、艺术品和音乐都可能需要额外 release 或使用限制。
4. 背景视频如果自动播放、超过 5 秒并与其他内容并行，需要可见的暂停/停止/隐藏机制；prefers-reduced-motion 应显示 poster 或静态图。
5. 前端实现要生成 poster、移动端低码率版本、合理尺寸裁切、暗化/遮罩、字幕/文本替代和 object-fit 规则；不要直接把原始 4K MP4 塞进首屏。
6. 如果视频传达信息，要提供等效文字、字幕或说明；如果只是装饰，避免读屏重复，把核心信息放在真实文本里。

设计判断

移除视频后，首屏仍应能说明品牌/产品/任务；关闭动效后，用户仍能读清标题并完成主行动；打开授权记录后，维护者能追溯来源、署名、修改、release 风险和禁用动作。三者同时成立，视频才是健康素材。

实现建议

建立 video asset intake record：assetId、source、videoUrl、licenseName、licenseHref、licenseType、creator、creditRequired、creditPlacement、downloadDate、duration、fps、resolution、crop、poster、mobileVariant、muted、autoplay、loop、pauseControl、reducedMotionFallback、captions/transcript、peopleRisk、brandRisk、propertyRisk、forbiddenUses、qualityBudget 和 relatedPageRole。React/Next.js 中优先自托管优化后文件，用 poster 占位，必要时 preload="none" 或懒加载；自动播放必须 muted、playsInline、loop 与暂停按钮配套。

反例/风险

把 stock video 当作真实客户/产品证据；首屏加载 40MB 4K MP4；视频背后文字没有遮罩导致对比不稳；无暂停按钮；reduced-motion 仍播放；未记录人物/商标 release；把 Coverr/Mixkit 素材批量打包成模板资源；把视频用作 AI 训练数据；把 Restricted License 视频用于商业广告。

案例分析

Coverr 许可页说明视频/音乐可用于商业和非商业项目，但也写明免费 下载需要署名，禁止汇编成竞争服务和用于 AI 训练或数据集，并提醒品牌、商标、可识别财产/地标等权利不一定已清除。Mixkit 的视频页说明 Free License 视频可用于 YouTube、社交营销、在线广告和音乐视频等商业项目，Restricted License 只适合非商业；Mixkit 用户条款也强调用户只是获得非独占许可，并禁止批量聚合、做竞争服务和销售未充分改造的素材副本。WCAG 2.2.2 要求自动移动内容有暂停/停止/隐藏机制；web.dev 的视频懒加载建议用 poster 和 preload="none" 控制初始下载。可学习点是：视频素材推荐必须同时输出授权、release、播放控制和性能预算。

来源链接

Coverr License: https://coverr.co/license Coverr Stock Video: https://coverr.co/ Mixkit Stock Video: https://mixkit.co/free-stock-video/ Mixkit License: https://mixkit.co/license/ Mixkit Terms: https://mixkit.co/terms/ W3C WCAG Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html web.dev Lazy Loading Video: https://web.dev/articles/lazy-loading-video MDN video element: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video