读者写道:
我看过做得很漂亮,但是我很难找到有关最佳做法的任何文章。 我试图使客户远离想要视频的背景,尽管很难反对它,因为正确处理后看起来确实很棒。
“看看我竞争对手的网站,他们有一个视频!! 你可以做到的!!”,他们说。
我遇到的问题是,当客户实际向我发送他们要使用的视频时,要么质量太差/质量低下,要么文件太大,无法在用户离开站点之前及时加载并且永不回头。
是时候换个思考了!
是“只是趋势”吗?
我不认为“视频”是一种趋势,但是“用视频覆盖整个屏幕并将白色文本设置为主页”可能是一种趋势。 并不是说这有什么问题。 另一种思考趋势的方式是时尚 ,人们并不倾向于对时尚持消极态度。
现在,这种特殊趋势至少已有几年了。 像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/