我应该使用视频作为背景吗？

读者写道：

我看过做得很漂亮，但是我很难找到有关最佳做法的任何文章。 我试图使客户远离想要视频的背景，尽管很难反对它，因为正确处理后看起来确实很棒。

“看看我竞争对手的网站，他们有一个视频！！ 你可以做到的！！”，他们说。

我遇到的问题是，当客户实际向我发送他们要使用的视频时，要么质量太差/质量低下，要么文件太大，无法在用户离开站点之前及时加载并且永不回头。

是时候换个思考了！

是“只是趋势”吗？

我不认为“视频”是一种趋势，但是“用视频覆盖整个屏幕并将白色文本设置为主页”可能是一种趋势。 并不是说这有什么问题。 另一种思考趋势的方式是时尚 ，人们并不倾向于对时尚持消极态度。

现在，这种特殊趋势至少已有几年了。 像60个带有完整视频背景的网站的美丽示例这样的帖子已有3年以上的历史（据我所知）。

人们确实倾向于对旧时尚视而不见。

有时趋势对结果没有好处

有研究表明，视差滚动似乎多余的趋势不会对“可用性，娱乐性，满意度和视觉吸引力”产生负面影响，但会增加乐趣。

至少对我来说是一个惊喜。

符合品牌吗？ 您对网站的计划和愿景？

记住，他们雇用了您。

有一个经典的比喻，您不会告诉水管工如何安装水龙头。 您聘请他们这样做是因为他们是专家。 在这种情况下，该公司雇用您来设计网站，因为您是专家。 在您认为“好吧，您确实告诉水管工要安装哪个水龙头 ”之前，这一直成立。

不过，如果他们交给你似乎并没有得以顺利与网站的其余部分，这不是很好的视频。

视频只是一种媒介，它并不能免于坚持使用该品牌。 它适合调色板吗？ 它具有相同的声音和语气吗？ 感觉像属于吗？

视频只会越来越普通

使用方法也会发生变化。 哈利·波特中的人们对报纸上的图片移动并不感到惊讶，这是他们的正常现象。

质量最好高一些

不是因为规模，而是因为期望 。 如果您要强迫我看这部影片，那就更好了。 它可以更好地帮助我以更快，更有意义的方式理解您的情况。

自动播放是唯一的方法吗？

人们讨厌自动播放。 除了没有看到无数人看到它们蠕动和抱怨之外，我没有为您指出的研究。

没有声音

没有声音时，自动播放的效果几乎没有那么差，而且公平地说，这些视频没有声音的趋势是。 虽然，至少对我来说，当我看到视频开始自动播放时，它会触发哦，或者关闭它的肌肉记忆。

性能

这是房间里的大象。

即使是小型视频也是巨大的资源。 特别是在您要进行默认全屏显示时。 尤其是当质量需要很高时，否则将使网站令人尴尬地变得无用。

您是否有计划不完全破坏性能？ 有许多研究表明， 不良的表现是不良的 。

也许您只能在页面其余部分加载后才能加载视频？ 芥末切吗？ 显示漂亮的poster图像？ 也许有一种方法可以做到……

<video
  src="#defer-loading"
  poster="nice-default.jpg
  autoplay
/>

您还有更多技巧可以研究吗？ 内联吗？ 极限压缩？ 流媒体？ 极限颜色/黑白？ 覆盖静态内容（例如点/线）以有趣的方式隐藏较低的质量？ 模糊？

预算编制

您是否有性能预算，以便视频可以触发其他地方的牺牲，从而使页面晚上显得有些沉重？ 似乎是一种公平的方法。 这是一种常见的趋势，因为趋势似乎指向非常简单的页面，这些页面带有简单的号召性用语，可将您带到其他地方。

您需要服务吗？

以我的经验，使用YouTube或Vimeo之类的视频托管服务可以解决很多难题，例如带宽费用和跨浏览器的互操作性。

您可以设计播放器使其适合设计吗？ 还是您需要更多的完全控制权？

您要衡量成功吗？

如果视频背景在网站设计中发生了巨大变化，那么设置一些指标以确保变化是积极的想法不是一个好主意吗？ 并制定一个计划吗？

需要代码使其全屏显示吗？

让我对jQuery插件之类的东西有些怀疑。

CSS是您需要在背景中放置视频并调整其大小的工具。

Dudley Storey已通过以下方式进行处理：

video.fullscreen { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
}

他的演示甚至具有暂停等一些奖励功能：

见笔全屏HTML5页面背景视频由达德利·斯托里（ @dudleystorey ）上CodePen 。

他在该主题上的博客文章还涵盖了其他一些重要内容，例如如何将视频隐藏在小屏幕上（如果需要）以及如何处理IE 8。

翻译自: https://css-tricks.com/should-i-use-a-video-as-a-background/