一位读者来信
我见过一些做得非常棒的例子，但我很难找到关于最佳实践的文章。 我试图让客户远离使用视频背景的想法，即使很难反驳，因为它确实在做对的时候看起来很漂亮。
“看看我的竞争对手的网站，他们有视频！ 你也可以做！” 他们说。
我遇到的问题是，当客户真的给我发送他们想使用的视频时，要么是视频很糟糕/质量很低，要么是文件大小太大，在用户离开网站之前根本无法加载，他们也再也不会回头了。
是时候进行一场思维风暴了！
这只是一个“趋势”吗？
我认为“视频”本身不是趋势，但“用视频覆盖整个屏幕并在其上设置白色文本作为首页”可能是一种趋势。 并不是说这样做有什么不对。 另一种看待趋势的方式是时尚，人们往往不会对跟随时尚感到那么负面。
然而，这种特定趋势至少已经有几年了。 比如 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%);
}他的演示甚至包含了一些额外的功能，比如暂停
查看 Pen 全屏 HTML5 页面背景视频 by Dudley Storey (@dudleystorey) on CodePen.
他在此主题上的博文 还涵盖了一些其他重要事项，比如如何在小屏幕上隐藏视频（如果您愿意）以及处理 IE 8 的方法。
我用这个创建了一个新的网站，目前正在建设中。只遇到一个问题。就像示例中一样，视频播放完后，视频会变成黑色，持续 2 秒。有什么办法可以解决吗？
我希望看到的是视频以流畅的方式重播。
试试不同的视频，朋友。试着将你的视频上传到 YouTube，然后使用它。我还发现，一分钟或更长的视频真的很重，可能需要一秒或更长时间才能重新加载。也许这就是你的问题？看看这个视频是否也出现同样的问题。 https://www.youtube.com/watch?v=a87GC4ahmjA
为什么不使用
object-fit: cover;呢？查看 CodePen 上 Kseso（@Kseso）的 灵活覆盖视频。
我的假设是它在 IE 中没有实现。不过，这将是理想的。
是的，你确实需要
video[poster]{ height:100%;width:100%; object-fit: cover;}来使视频海报在整个视窗中很好地拉伸。但我没有遇到 2 秒黑屏的问题，我创建了两个，一个带有自动播放和暂停按钮，另一个带有控件...
根据我们的经验，我们必须记住，移动设备不会自动播放，因此在制作响应式网站时，必须使用一个好的图像回退。
我感觉你对视差的看法和我是一致的，如果你不介意我用这个双关语，那就是平行。但我见过一些私人的 A/B 测试表明，无论我们作为开发者/编码员觉得它多么笨拙和资源密集（它确实很笨拙，因为它需要比没有视差更大的图片和额外的代码），用户都喜欢它，而且通常愿意为“酷”或“趣味性”而承受（实际上很小但确实存在）的性能损失。
我想我很幸运，我没有遇到很多带有视频背景的网站，至少现在还没有，但你的脑力风暴似乎触及了我很多要点。
它需要一个不错的加载图片（这应该很容易），用一个高质量的视频替换它——而且你需要处理在小智能手机和我 28 英寸或更大的屏幕上都能正常运行的东西！我不明白在没有自动播放的情况下视频背景是如何工作的，但如果你自动播放声音，我会将你的网站静音并列入黑名单，因为我是客户/访客。我怀疑我不是唯一一个这样做的。 (我曾经有一个客户，他们在某些页面上自动播放一个视频，而不是作为背景，我总是将电脑静音，因为每次我访问他们的网站时，这个视频都会让我很烦。奇怪的是，他们倒闭了。我无法证明是那个页面导致他们倒闭，但我有所怀疑。)
我知道我们都在努力实现“你有 10 秒钟时间吸引访客注意”的模式。视频可能很难在 10 秒钟内加载完成，即使你把它交给 YouTube、Vimeo 等，除非它真的很短。我认为你错过了讨论你的客户作为关键要点。如果他们带着一个他们想在背景中播放的 30 分钟的视频来找你，那么这个视频几乎肯定不适合以这种方式播放——如果我在 YouTube 上看到了它，我会等待它加载并播放，这是不同的。如果它加载了，并在你点击之前吸引了我的注意，我可以理解它可能会延长 10 秒钟的时间，然后我才会点击，这不是一件坏事。
本着“模糊放大”背景图片技术的理念，我一直尝试用制作超小的、低帧率的动画 GIF、将其拉伸和模糊来实现这种效果。我制作了一个 15 秒、10 帧/秒、40x20 的 GIF，它只有不到 200kb——它创造了一个非常酷的背景效果。而且你仍然可以在页面加载完成后加载一个高分辨率视频，但仅仅是放大的小图片上的运动就产生了我们想要的效果，而不需要下载一个巨大的视频。
嘿，Paul——我们有机会看到这个的简短演示吗？也许是一个 CodePen？
@Mike M - 我会尽力在这个周末给你一个 CodePen，最迟周一。我还有很多其他事情要处理，但我一直想为我的博客写一个演示。
这里有一个 CodePen！
一些注意事项
– 由于 IE10-11 不支持任何版本的 CSS 过滤器，因此使用了一个备用“像素化”效果。
– 如果禁用了 Javascript，则会下载完整视频，但不会显示。更好的处理方式是使用 Javascript 将
<video>元素插入 DOM 中。– 全尺寸视频没有与动画 GIF 同步。我有一个解决方案，我会在我的博客上进行说明。
– 应该适用于 IE10+ 和所有现代浏览器，但我只在 Mac 上的 Chrome、Windows 10 上的 IE11 和 Edge 13 上测试过。
本周晚些时候，我的博客将详细介绍其工作原理、错误修复和其他性能改进。如果你感兴趣，请访问 plaidpowered.com
我认为，只有在视频有特定目的的情况下，才应该使用折叠以上、全屏的视频背景，否则它会非常分散注意力。例如，我们正在为一家位于伦敦的活动场地管理公司重新设计一个网站，我一直在推动使用视频背景，因为它展示了场地，而不是因为它看起来很好。功能优先于时尚！
嗨，Chris，
对于 Android 和 Windows Safari 用户有什么解决方案吗？
它与大型背景图片或英雄图片并非遥不可及。使用背景视频将需要一定的责任感。就像网站上的大部分图片一样，需要进行优化。我熟悉视频，我看到了同样的问题。很多视频都没有被优化到尽可能小的尺寸。而且，就像视网膜图片已经变得复杂了我们如何提供图片一样，视频/4K 视频也出现在了遥远但可见的未来。
思科声称，到 2019 年，80% 的互联网流量将是视频内容。
我们也知道，等待时间会破坏 #ux。艺术指导将至关重要。
我同意视频背景在用户/客户中效果很好。但在性能/预算不断增长，以及开发者责任不断提高的时代，布鲁斯·劳森强调了一点：地球上大部分人并没有使用高端手机或优质网络。
幸运的是，许多工具正在涌现——资源提示 就是一个例子。
很棒的 CSS！
感谢分享。我想在我的网站 http://www.booswp.com/ 上使用这个 CSS。
谢谢管理员 :)
一张图片胜过千言万语，但一段视频胜过千张图片。很烂
如果你有一个引人入胜的视频，大多数情况下，它都是为了营造公司的氛围，那么就尽情展示它吧。
请记住，视频需要很短，最好低于 15 秒，并且循环播放，没有音频。
此外，你还需要 .mp4、.ogv 和 .webm 格式，以便它们在不同浏览器中都能正常工作。海报是移动用户的一个很好的回退。
但如果你的视频是网站的演示，那么背景视频将无法正常工作，因为它会被前面所有的其他元素遮挡。
作为文章中链接的 jQuery 插件的作者，我只是想插一句，这篇文章很棒。自从 2012 年 8 月我创建 BigVideo.js 以来，发生了很多变化。
最初，我的用例是一个网站，它的内容主要是由视频组成（例如，一个代理商的资料）。我需要能够支持环境背景视频，以及带有声音和自定义品牌播放器控件的视频内容。
BigVideo.js 对于你只想在页面顶部使用环境背景视频的情况来说，有点过于复杂。如今，视频在浏览器中的支持要比以前好得多，正如 Chris 所说，可以用更少的 Javascript 代码来实现。我已经更新了项目页面，以反映这一点，并通知大家，该项目不再处于积极开发阶段。
嗨，告诉我你怎么看我的网站，它使用 HTML 视频作为背景 :-) http://www.andreapilutti.com
网站很漂亮，从菜单到页面部分的过渡有点卡顿（我用的是 Macbook Air，不确定手机会怎样），不确定是 Javascript 优化问题，还是将元素放到 GPU 上（我没检查代码），或者只是同时运行了太多关键帧（？）或过渡？不过真的很漂亮，很喜欢顶部的视频，很适合你的图片 :)
谢谢 Brendon！是的，我知道滚动可能会有点跳动。我猜想这与 Skrollr.js 插件有关，它会根据滚动位置计算动画元素的位置。对于手机，我已经禁用了这些滚动效果，并用占位符图片替换了视频。
你在性能部分的
poster属性中缺少结束引号。不是什么大问题，但我还是想指出来 :)除此之外，文章很棒。
作为用户，我讨厌视频背景。一直都讨厌。它们很烦人，强迫我看它们，它们自动播放，浪费我的手机流量。
作为开发者，我会问我的客户为什么要用它？仅仅是为了看起来和竞争对手一样酷炫？它能帮助提高 ROI、CPM 和所有其他指标，最终提高收入吗？
作为用户，我绝对讨厌它。它浪费资源，耗尽电池，还会让我的风扇转速变快。
这里还有一个可访问性问题。对于有视觉障碍或对闪烁和移动敏感的人来说，页面上的移动图像会使文本难以阅读。这个例子展示了文本在亮或暗的背景上，而且背景会随着时间变化。（隐藏的暂停按钮可能不太有用 - 但即使它在最上面，如果人们[i]找不到[/i]按钮，因为他们难以理解页面，那么它就没有什么用处。）
我认为使用拉丁语占位符文本而不是包含你想要提取的信息的真实文本的习惯，会让人忽略这个问题。
这里还有第二点需要注意：对极端可访问性的考虑已成为设计师的考量因素。许多网站需要对屏幕阅读器进行访问。人们已经发明了智能图像替换技术。
但现在我们正在给那些如果页面不做任何花哨的事情就能很好地使用页面的用户制造困难。我们不仅让他们使用页面更困难，而且由于他们的需求更依赖于环境，因此他们没有真正的方法来禁用会导致问题的东西。例如：他们可能完全可以观看视频，只是无法在背景移动时阅读文本（无论是在文本的正后方还是旁边，这两种情况都可能存在问题。）
如果他们完全限制视频播放（这甚至并不容易），这仍然算不上是一个好选择，因为它也限制了所有视频有用的时候。
如果你正在创作艺术作品，那完全没问题。但如果你还有想要传达的信息，请体谅一下。
Chris，我喜欢你，这篇文章也很不错，但 Inca 说的才是文章中缺少的重要部分。
作为一名患有前庭疾病的人，也是网络运动可访问性倡导者，背景视频并不是一个好主意……至少现在不是。
关键就在于现在。正如 Inca 指出的，它很难阅读。屏幕阅读器可能难以访问视频上的内容，具体取决于它的实现方式。大多数情况下，播放控件都缺失，如果有播放/暂停按钮，也很难找到，而且在奇怪的标签顺序中。
我们需要浏览器制造商实现应用程序级别的设置，这样像我这样的用户可以指示视频永远不要自动播放，并且动画在我不说否则的情况下保持关闭状态。这将消除背景导致人们生病的问题，但它并没有解决文本在图像和视频上的可读性问题。
我完全同意：我认为可访问性应该是视频背景的主要考量因素。在 A List Apart 上有一篇很好的文章，介绍了如何为患有前庭疾病的人设计，但即使是我这样没有患病的人，也见过一些带有旋转运动的网站，让我感到（轻微）身体不适（这个网站，例如 - 请谨慎打开，显然）。这种经历让我对不加思索地使用视频背景更加谨慎。
如果你确实使用这种视频，最好禁用 AirPlay（Apple 文档说在视频元素上使用
x-webkit-airplay="deny"）。我正在用手机听播客，通过 AirPlay 流式传输到我的 Apple TV，然后打开了这篇文章。播客被中止，视频出现在电视上。我甚至还没滚动到这篇文章包含视频的部分... :)嗨！
用于视频播放器的 CSS 有以下规则；
这样做与以下方式有什么不同吗？
如果你使用这段代码来居中视频，你建议的替代方案只有在视频具有固定宽度和高度，并且设置了
margin:auto时才有效。否则，将所有位置设置为 0 会将视频拉伸以适应容器，并在大多数情况下扭曲纵横比。Chris 的方法允许他拉伸和裁剪以填充容器，而不会扭曲它。我只是想知道为什么 z-index 必须是 -100？我刚接触 CSS 和 HTML，所以如果这个问题很明显，请原谅我。我大多数带有视频的网页在 z-index 为 0 时都能正常工作，而其他所有内容都在 +1 层上。
嗨。z-index 为 -100 只是为了确保视频位于页面上所有其他元素的后面。因此，如果将来在页面上添加了更多元素，我们就不必再担心更改 z-index 了。
你好！
为什么我们要使用 (top: 50%; left: 50%;) 和 ( transform: translate(-50%, -50%);)？
这两者不是一样吗？
谢谢！
一位读者来信