如何在您的首页上嵌入英雄背景视频

在网站的“英雄”部分了解如何使用视频背景 & 为什么它可以大大提高您的业务转化率.


如何嵌入英雄视频背景

视频在促进网络观众互动方面非常有效,这已不是秘密。与通过文字呈现相同的信息相比,人们以惊人的速度回应并记住视觉效果。我们的大脑只会更快地处理图像-更不用说观看视频的体验很有趣,令人兴奋,而且-坦率地说,让人上瘾。观众对视频内容的消费有着无限的渴望,这就是为什么预计在两年之内 所有网络流量的80% 将与视频绑定!

现代网页设计正朝着用更动态的视觉效果代替静态图像的方向大力推动.

点击鸣叫

不仅单词受到了极大的净化。现代网页设计正朝着用更动态的视觉效果代替静态图像的方向大力推动。静态的文字和照片网页足以满足用户需求的日子已经一去不复返了。视频就是它的所在-现在是时候问问自己是否可以继续忽略它在网站上的存在.

您尚未采用该格式的主要原因可能是由于其技术上的复杂性。虽然可能需要一些额外的准备和优化工作才能将视频发布到您的网站上,但在最近几年中,使用各种插件和HTML5使该过程变得更加容易.

为了帮助您了解如何将视频嵌入到您的网站中,本指南在这里向您展示了如何创建令人难以忘怀的视觉体验,使您不会忘记.

“英雄”背景视频

当我们谈到将视频嵌入到您的网站时,我们不仅在谈论放置在任何随机位置的任何类型的视频。本文专门讨论如何利用一种流行的有效趋势的网页设计趋势,即 英雄背景视频.

这是一个例子:

视频背景可以实现的动作和冒险示例这是一个使用英雄背景视频的好例子。如您所见,视频为此提供了动感和冒险感 自行车商店 仍然无法实现的照片.

之前我们已经在“折叠以上”区域。对于初学者来说,英雄形象(或有时称为横幅)通常是人们到达您的站点时首先看到的东西,其中最重要的内容以简洁直观的方式呈现。该主要部分通常使用光滑的背景图像填充整个屏幕的宽度和高度,在关键的号召性用语按钮或链接周围留有足够的空白空间.

相同的概念适用于此处,但显然现在我们要用视频替换背景图像。乍一看,这似乎是一个相对微不足道的变化:好的,以前我们有一个骑自行车的人的照片,但是现在我们有了一个正在运行并正在骑自行车的视频,大呼,对?

观看运动中的简单时刻,会对用户如何感知和与您的品牌互动产生巨大影响.

点击鸣叫

好吧,事实证明,观看一个简单的运动时刻可以对用户如何感知和与您的品牌互动产生巨大影响。与任何其他媒体相比,视频激发情感和动作的速度更快。如果转换是您的主要目标,那么背景视频可能是成功网站的秘诀.

为什么要使用背景视频?

大量的证据说明了视频对企业的影响力。这是一些诱人的统计数据 福布斯分享 应该作为动力:

  • 在目标网页上嵌入英雄背景视频可以将转化率提高80%
  • 产品视频有助于在做出购买决定时影响90%的客户
  • 观看有关产品的视频后,有64%的客户更有可能在网上购买产品.
  • 数字营销专家James McQuivey估计 一分钟的视频内容价值180万字.

英雄背景视频示例您是否希望看到 国家公园, 还是你宁愿 经验 他们?

现在,我们已经确定了为什么视频内容如此重要的原因,让我们最后看看如何在您的网站上处理这些令人毛骨悚然的事情。!

在您的网站上嵌入背景视频

的确,有很多文件格式可供选择,不同级别的浏览器支持,以及将视频嵌入网页的方法多种多样,但我将尽可能简化,仅告诉您最相关的信息。 ,逐步实现所有可能用户的最大兼容性.

自托管视频与使用托管服务

您需要确定的第一件事是视频文件的实际位置:在网站自己的服务器上(换句话说,您自己的网络托管帐户)或在YouTube或Vimeo等视频托管平台上.

一些 自托管视频的优势 包括在嵌入方式上拥有更大的自由度,使视频全屏显示更容易实现,以及在获利门户网站后面保护视频的更多控制权(为此需要雇用熟练的后端开发人员).

一些 视频平台的优势 包括更轻松的嵌入,快速专为视频文件优化的世界一流服务器的使用(这减轻了您自己服务器上的带宽),以及更广泛的共享能力.

通常,对于网站上的通用视频,我建议您使用视频平台来轻松提供您的内容,特别是如果您的网站处于共享托管计划中时。但是,背景英雄视频的详细信息需要某些设置才能更好地自我托管。您可能有使用任何一种方法的原因,所以我将为这两种方法提供说明.

方法1:自托管

首先,视频必须存在于您的服务器上。我们将稍后讨论您需要哪种类型的视频文件-但就目前而言,就像添加图像一样,您将需要使用 FTP程序 将您的视频文件上传到服务器.

现在,我们将在您的网页中插入正确的代码以发挥作用。 HTML5允许使用 标签,该标签将Flash替换为视频的首选Web格式。这是我们创建适当的全屏背景视频所需的内容:

的HTML

选择代码

的CSS

video#bgvideo {
位置:固定;
最高:50%;
左:50%;
最小宽度:100%;
最低高度:100%;
宽度:自动;
高度:自动;
z索引:-100;
-ms转换:translateX(-50%)translateY(-50%);
-moz-transform:translateX(-50%)translateY(-50%);
-webkit-transform:translateX(-50%)translateY(-50%);
转换:translateX(-50%)translateY(-50%);
背景:url(placeholder.jpg)不重复;
背景尺寸:封面;
}选择代码

这里有很多事情,所以让我们看一下这些设置的含义.

内线

这样可以将视频保留在浏览器中以及内容旁边,这对于防止视频真正进入全屏显示非常重要,因为在整个屏幕上,视频都占据了其他位置.

自动播放

您很可能希望英雄背景视频在页面加载后立即播放,而无需点击“播放”按钮。但是,对于移动用户来说,这有几个问题,我将在稍后讨论.

静音

除非您的视频在其音轨中包含必要的信息,否则最好使背景视频静音。人们在网上冲浪时会被意外音频打扰,因此非常讨厌,因此关闭声音比关闭用户更好.

重复播放视频的选择应视具体情况而定。如果您希望视频具有结局性,而视频以清晰的号召性用语结尾而又不会分散注意力,那么就可以忽略此设置.

海报

在视频完成加载和播放之前,在此处提供图像文件将充当占位符。您可以自行决定最合适的显示方式,无论是视频第一帧的静止图像,还是徽标或横幅之类的东西.

我们的 的CSS 设置实际上是指示浏览器将视频扩展到整个页面。值得注意的是 背景 使用相同的设置 海报 图片;如果过时的浏览器无法识别 属性.

如果您打算在背景视频上显示文字或号召性用语,则可以照常在“ div.

方法2:YouTube或Vimeo

使用此方法会将视频文件保留在您的站点之外,而是将它们存放在专门处理视频内容的专用服务器上。假设您已经上传了视频,则现在需要 嵌入链接. 对于YouTube,可以通过点击视频页面上的“共享”按钮,然后单击“嵌入”来找到。对于Vimeo,您将类似地单击“共享”,然后复制弹出窗口中显示的嵌入链接.

小建议: 使用“分享”按钮时,YouTube和Vimeo还将提供自动播放,循环播放和显示/隐藏播放器控件等设置选项。确保您不会错过这些内容,以便轻松调整视频的显示方式。 Vimeo可能还需要 其他设置 使其可以作为背景视频正常工作.

您可能会注意到,这些嵌入链接包含在 iframe 标签,其行为与我们的HTML5元素略有不同。为了使这些视频能够作为全屏背景,我们需要对标记进行一些调整。多亏了 瑞沙(Rishabh Aggarwal), 有一个简单的解决方法可以做到这一点:

的HTML

选择代码

的CSS

.videoContainer {
位置:绝对;
宽度:100%;
高度:100%;
最高:0;
左:0;
底部:0
正确:0;
显示:flex;
flex-direction:列;
证明内容:中心;
align-items:居中;
}
#英雄 {
职位:相对
}
iframe {
/* 可选的 */
宽度:100%;
高度:100%;
}选择代码

您的YouTube或Vimeo上传的视频现在应作为英雄内容背后的功能性背景视频.

使用WordPress

如果您使用的是WordPress, 各种视频背景插件 无需担心代码即可完成上述任务。但是,其中大多数都是高级插件,您可能必须购买.

嵌入视频的提示和最佳做法

现在,您的视频已成功启动并投入使用,让我们进一步探讨优化,文件大小的复杂性,并确保英雄背景视频的外观和效果达到最佳状态.

了解文件类型

我之前说过,视频文件类型有很多选项,其中一些最受欢迎的是 mp4, 奥格, 和 Webm. 现代浏览器几乎被普遍接受 mp4 作为主流格式,因此至少这是您需要包含的文件类型。但是,最好确保所有用户都获得类似的体验,即使他们使用的是过时的软件也是如此。在这种情况下,您的标记将类似于以下内容:

选择代码

小建议: 最后在源列表中插入您喜欢的文件格式。这是浏览器最后阅读的内容,如果用户的设备支持,它将是加载的内容。.

另一个要考虑的技术是 视频编解码器 使用,这基本上是文件被浏览器的媒体播放器压缩然后解释的方式。您应该关注的主要编解码器是 H.264, 大多数浏览器都接受哪些功能,YouTube和Vimeo等网站支持哪些功能.

如果所有这些听起来像是令人困惑的行话,请不要担心。您的视频很可能已经在期望的范围内 mp4 / H.264 格式。通常是从股票视频站点下载时获得的文件类型。如果您需要将其他文件类型转换为mp4,则需要其他软件来完成. Adobe Premiere Pro 是处理视频的行业标准,但是可以理解,这超出了大多数人的承受能力。幸运的是,有一个针对PC和Mac的免费程序,名为 手刹 那应该完成您所需要的.

带有音频的英雄背景视频的示例寒川神社 可以为视频(和音频)带来美好而舒缓的体验,但是您会明白为什么在这种情况下可以接受)。注意视频与导航菜单的巧妙集成.

优化视频文件

将您的视频保持原状并将其直接上传到您的网站可能不是一个好主意。视频文件可能很大,即使是高清或超高清视频,也可能长达30秒。请记住,您的用户必须先将这些文件下载到浏览器中,然后才能播放,并且等待加载50 MB的视频不利于提供出色的用户体验.

您需要调整视频的 解析度, 比特率, 和 长度 为了优化最佳文件大小。看看这个方便 指南 快速了解如何为网络准备视频.

那么太大太大了?一般认为 5兆字节 是背景视频的最大大小,带有文件大小 小于1兆字节 是理想的。为了在质量和尺寸之间取得平衡,要实现这一点可能非常棘手。对于初学者,请保持分辨率不变 720p 或更少,以实现清晰度和经济性的完美结合。清晰的4K视频可能看起来很漂亮,但请记住,大多数人在15英寸以下的屏幕上浏览网页,因此增加的分辨率将是多余的.

就长度而言,理想的运行时介于 10–30秒. 如果太短,您的视频可能会显得微不足道,或者如果被循环播放,则会显得过于重复。太长的视频可能会失去用户的注意力并增大文件大小.

比特率会对文件大小产生重大影响,这可能是您将花费大部分精力进行调整的原因。为您的视频找到理想的数字是超出本文范围的过程,但是YouTube和Vimeo提供了文件优化指南 这里这里 分别有助于引导您正确的方向.

删除音频

如前所述,静音背景视频是用户体验的首选做法。如果确实没有理由播放声音,那么您实际上可以比静音视频更进一步,并从文件中完全删除音轨。这样做将消除不必要的数据,从而极大地减小了文件的大小。这意味着服务器上的带宽更少,用户的加载速度更快. 手刹 是轻松从文件中删除音轨的好选择.

自动播放和移动设备

我提到了针对移动用户使用自动播放设置的一个小警告。为了防止不必要的数据使用,为了安全起见,许多手机会拒绝在网络上自动播放视频。这意味着“播放”按钮将作为叠加层嵌入背景视频的顶部。尽管这是个小麻烦,但真正的烦恼是该覆盖层可能覆盖您放置在英雄部分的所有链接或内容。 h!

看来最新版本的iOS现在支持自动播放功能,但是许多Android手机和其他移动操作系统仍然参差不齐。尽管复杂的JavaScript解决方法和浏览器入侵可能可以解决此问题,但它们的可靠性并不一致,因此不建议这样做。为了获得最一致的用户体验,最好的解决方案可能是使用媒体查询来完全在移动设备上删除视频并将其替换为占位符图像。为此,请将其放入您的CSS文件中:

@media屏幕和(最大设备宽度:768px){
#英雄 {
背景:url(placeholder.jpg)不重复;
背景尺寸:封面;
}
#bgvideo {
显示:无;
}
}选择代码

对比文字 & 视频

为了获得最佳的视觉体验,您需要确保您的文字清晰易读,并与后面的视频脱颖而出。在较暗的视频上使用浅色文字或在较浅的视频上使用深色文字可确保您的用户不会错过英雄部分的重要内容或号召性用语.

尝试使用遵循特定调色板的视频-如果这些颜色与您品牌的风格指南相匹配,甚至会更好。背景颜色过多的背景视频可能在您的网站上看起来不合适,或者可能与上面的文字分心.

更改视频视觉效果的有效方法是应用叠加层和滤镜。这可以通过Adobe Premiere等编辑软件来完成,甚至可以通过CSS在现代浏览器上完成 过滤 属性。尝试尝试颜色叠加,饱和度,模糊和不透明度,以微调视频的美感,使其与您品牌的风格相匹配,并且不会分散文字的注意力.

具有引人入胜的编辑的英雄背景示例FreshDesign广告公司 使用引人入胜的编辑来传达无论循环多少次都很有趣的本质和人物。彩色滤光片还可以与文字和徽标形成鲜明对比.

在哪里可以找到适合您背景的视频

现在您可以为您的网站添加有效且经过完美优化的背景视频了……除了,现在您需要实际的视频!那你从哪儿得到一个?

最简单,最便宜的解决方案是从众多库存网站之一购买视频内容. iStock, 快门, 溶解, 遮盖物 乃至 Vimeo免版税 是获取专业品质素材的绝佳资源.

小建议: 浏览素材库时要小心。不要仅仅为了使用它而使用它。视频必须添加到您网站的消息中,并获得其存在的理由。许多股票视频看起来过于普通和平淡,其一刀切的全能特性可能无助于提升或区分您的网站..

为了获得最佳效果,您需要聘请创意代理商或自由摄影师,为您提供量身定制的素材,以使用户真正了解您的产品或品牌的本质。我建议您对附近的都会区附近的代理商或生产公司进行Google搜索,并查看其投资组合。从几个不同的提案中获取建议和价格估算,以权衡您的选择。不过,这将是最昂贵的选择,仅单个视频背景就可能花费数千美元.

自由职业网站如 上班 或Fiverr可能对预算更友好,但对于他们提供的生产价值或责任而言,实在有些废话.

结论

每个人都喜欢一个好的视频。我们似乎是他们的傻瓜-我们在电视,计算机,电话,平板电脑,书桌,沙发,汽车,无处不在的任何地方都可以随意食用它们.

据说网络上95%的信息都是书面语言。但是,根据目前的预测和趋势,我们的Internet浏览体验可能很快就会与视频紧密相关。考虑到视频在激发灵感方面比言语要有效得多,因此这是有道理的.

尽管并非每个企业或网站都需要背景视频来传达其品牌,但很有可能会为您的品牌或形象提供帮助。既然您知道如何将其嵌入网站,我鼓励您看看英雄背景视频将带给您业务多大的距离.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map