整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

使用视频作为网页背景技术

家好,我是吉礻羊。

不知道大家有没有在浏览网页的时候会看到动态的网站背景一看就是高大上,用审查工具一看,靠背景居然是视频,mp4格式的。

动态的网页背景

今天就来说一下如何把背景做为网页的背景的技术

作为背景的视频应该设置为自动播放,而默认状态下应该是关闭声音

背景视频应该有个替代图片,当浏览器不支持这种HTML技术、视频格式时用图片替代

建议视频的长度应该是12-45秒之间

考虑到视频加载需要时间,视频的体积应该很小,尽量的压缩

实例:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>使用视频作为网页背景</title>

<style type="text/css">

video#bgvid {

position: fixed; right: 0; bottom: 0;

min-width: 100%; min-height: 100%;

width: auto; height: auto; z-index: -100;

background: url(polina.jpg) no-repeat;

background-size: cover;

}

</style>

</head>

<body>

<video autoplay loop poster="polina.jpg" id="bgvid">

<source src="polina.mp4" type="video/mp4">

</video>

</body>

</html>

于网站中的视频背景是好是坏,网页设计社区仍然存在争论。但是,在过去几个月中,我们看到使用全屏视频背景的网站比以往任何时候都多。但这真的是一个有效的策略吗?它有助于与观众互动吗?它会影响SEO吗?让我们来了解一下。

在本指南中,我们旨在通过比较在网页设计中使用全屏视频背景的利弊来找到这些问题的答案。我们还将通过示例为您提供有关正确实施出色视频背景的一些技巧。

使用全屏视频背景的好处

现在全屏视频背景在网页设计中如此流行是有原因的。使用它们有很多好处。即使您需要说服客户使用视频背景,这些要点也会派上用场。

瞬间吸引眼球

视频背景比图像或纯色背景更能吸引注意力。上面的折叠部分是访问者访问您的网站时首先看到的内容。而且您只有3秒钟的时间来说服访问者留在网站上并继续浏览。

使用视频背景,您更有可能吸引他们的注意力并让他们在您的网站上停留更长时间。

简化复杂的主题

如果一张图片值一千字,那么一个视频必须至少值一千张图片,对吗?这可能就是为什么93%的营销人员认为视频是他们战略的重要组成部分的原因。

视频可以为任何观众简化和解释甚至复杂的主题。这使得媒体对于不太知名的品牌、产品和公司来说更有效,可以很容易地向观众解释他们的服务。

展示产品和服务

视频背景还为您提供了一种以更具吸引力的方式展示您的产品和服务的方式。

例如,将视频背景添加到展示豪华客房和水疗中心的酒店网站肯定会让您的潜在客户有理由进行预订。

这同样适用于登陆页面、商业网站、餐馆,甚至电子商务网站。使用视频背景,您可以展示比图片轮播更多的产品。

增加销量

如果有一点可以让您和您的客户对视频背景感兴趣,那就是这个。使用视频背景实际上可以帮助提高销售和转化率。

在一个案例研究中,向主页添加视频背景将网站转化率提高了138%。

事实上,在登陆页面添加一个简单的解说视频就足以促进销售。使用视频背景,您将有一种微妙的方式来呈现您的服务,而不会干扰用户体验。

建立情感联系

网站中的视频背景在向观众展示更敏感的话题方面也很出色。而且它们在与用户建立情感联系方面也非常有效。

例如,如果您正在为慈善机构或非盈利组织制作网站,您可以使用视频背景来提供背景信息或了解您为帮助该事业所做的幕后工作。

使用全屏视频背景的缺点

使用全屏视频背景的优点多于缺点。但是,这些缺点会对您的网站增长产生巨大影响。

影响网站加载速度

使用视频背景的最大缺点是加载速度缓慢。由于视频的尺寸比图像大得多,因此它们需要更长的时间来加载。这对于互联网连接速度较慢的用户来说尤其成问题。

根据一份报告,超过50%的用户表示他们愿意放弃网站上的视频和动画以获得更好的加载时间。

在移动设备上不可用

移动设备仍不完全支持自动播放视频背景。因此,大多数使用视频背景的网站都被迫使用移动网站的静态图像版本。

在网站的移动版和桌面版上提供完全不同的体验只会让用户感到困惑。

旧浏览器的兼容性问题

尽管现在越来越多的人切换到最新版本的浏览器和应用程序,但仍有相当多的人使用旧的和过时的浏览器。

统计数据显示,仍有一些人仍在使用 Internet Explorer 9 等高度过时的浏览器。

此类较旧的浏览器不支持 HTML 5 全屏视频背景。虽然让您的受众使用现代浏览器来浏览您的网站更容易,但对用户来说并不方便。

难以突出 CTA

与图像或纯色背景不同,视频有许多不同颜色和闪烁灯光的场景。这使得在全屏视频背景上突出标题和号召性用语 (CTA) 变得非常困难。

除非您愿意使用基本调色板之外的颜色和组件,否则在使用具有快速移动场景的视频背景时,要注意您的网站标题、副标题和 CTA 并不容易。

全屏视频背景的示例 + 提示

通过在添加视频背景时实施正确的技术,您可以避免使用全屏视频背景的许多缺点。

这里只是一些应该如何完成的提示和示例。

选择合适的视频

(例如:Zyber)

这是使用全屏背景视频最明显但也更关键的部分——选择正确的视频会对你产生的影响有多大影响。以及它如何与网站的整体用户体验完美融合。

例如,不要使用带有闪光灯的快速移动的视频,而应该选择节奏更舒缓、节奏更慢的视频。

保持简短

(例如:湖畔)

我们生活在一个快速变化的世界,几乎没有耐心。可以安全地假设一个人不想盯着你的背景视频看 3 分钟或 5 分钟。此外,您会希望他们浏览网站的其余部分并说服用户采取行动。

所以最好使用很短的视频作为背景。长度低于 30 秒的视频将与网站完美契合。而且,如果您打算添加循环视频,请确保它具有平滑的循环过渡。

避免分散注意力的视频

(例如:幻影雇佣)

视频有时也会分散注意力。例如,具有高对比度、视觉效果和闪烁灯光的视频实际上可以将用户的注意力从您网站的重要部分转移开。

当背景视频将注意力从网站上移开时,人们很难将注意力集中在号召性用语上,甚至很难阅读网站的标题。

最好使用较少干扰或吸引注意力的元素的视频。

突出 CTA

(例如:员工解决方案)

CTA 可以说是网站或登陆页面最重要的组成部分。您希望访问者清楚地看到它并说服他们点击“购买”按钮。

在使用全屏视频背景时突出显示 CTA 将是一个挑战。但这并非不可能。

您可以使用滤镜来降低视频颜色的饱和度,将视频设为黑白,甚至可以使用颜色较少或外观极简的视频来轻松突出网站上的 CTA 和标题。

不包括音频

(例如:国家公园的隐藏世界)

向网站添加背景音频有助于为网站营造氛围,但自动播放音频不是这样做的方法。

您必须始终考虑到人们从不同的地方和设备访问网站,没有人希望在公交车上突然通过手机播放音频。或者在办公室访问网站时。

通过在将视频用作网站背景之前从视频中删除音频来解决此问题,实现仅在用户选择时切换音频的选项,或者至少在加载网站时向用户发出警告。

优化速度

(例如:丹纳)

有几种方法可以优化视频,使背景对网站加载时间的影响较小。

正确压缩视频至关重要。您可以使用 Handbrake 等工具来实现该目标。此外,请考虑为视频使用正确的分辨率。摆脱音频也将有助于减小文件大小。

综上所述

总的来说,使用全屏视频背景比其他格式有更多好处。再说一次,这取决于您使用它的方式和原因。因为视频背景并不适合每个网站。它可以成就或破坏网站的用户体验。

一、图片的表现形式

当我们在制作页面的时候,通常会遇到图片的三种表现形式,如下:

1、内容图片

内容图片是页面中真正的内容,没有内容图片,就无法完整的理解页面内容。如淘宝网上的商品展示图片,这些图片是网页的一部分,它们能帮助你决定这个页面的内容是否是你需要的。

内容图片

2、布局图片

布局图片出现在页面背景中,要想理解页面的内容,它们不是必须的。如苹果官网的这个图片,没有这个图片也能理解页面上文字描述的内容是什么意思。

布局图片

3、交互图片

图中用红色框起来的图片会给你浏览页面的时候带来一些帮助,如搜索图片,一看到就知道这里可以搜索想要的东西,购物车图片可以看到选购的产品,箭头图片点击可以看到更详细的产品等。

交互图片

二、创建内容图片

在HTML中我们用 img 标签创建图片,英文是image的缩写。

<img src="" alt="">

内容图片

  • img是空标签,没有结束标签
  • src属性的值是一个图片的URL地址,地址可以是相对路径,也可以是绝对路径
  • alt属性:填写对这张图片的简单描述,增加图片的可访问性
  • 图片应该被存放在单独的文件夹中,如:images文件夹

三、创建布局图片

布局图片是在CSS中被创建出来的,使用CSS中的background属性,如:

1)background-color 定义背景颜色,设置背景图片时,要始终设置背景颜色,确保背景图片没有成功时会显示一个背景颜色

2)background-image 可以指向一个相对路径或者绝对路径来添加图片。

3)background-repeat可以设置背景是否平铺在容器中,包含四个关键字:

  • background-repeat:repeat 可以设置背景图片横向和纵向都平铺。
  • background-repeat:no-repeat 设置图片不平铺,图片默认显示在容器的左上角
  • background-repeat:repeat-x 设置图片只能在横向平铺
  • background-repeat:repeat-y 设置图片只能在纵向平铺

4)background-position 属性可以控制背景图片显示在什么位置,包含两个关键字,如:

background-position:top left 设置图片显示在容器的左上角,第一个关键字可以是top、center、bottom,第二个关键字可以是left、center、right

CSS中和背景相关的属性可以简写在一行中,如:

background: #FF1298 url(images/logo.png) center right no-repeat;

首先是图片的颜色color,image,position,repeat,CSS属性能用简写就尽量用简写,简写比分开写性能更高。

布局图片

四、创建用户交互图片

Web上最常用的三种图像格式

1)Jpeg 可以展示一张照片或者复杂图像

  • 可以表示多达1600万种颜色,即所有的十六进制颜色
  • 不支持图像透明
  • 不支持动画
  • 扩展名为.jpg或.jpeg

2)png最适合展示网页插画、logo和网页小图标

  • 可以表示上百万种不同颜色的图像
  • 包括png-8、png-24和png-32,取决于想表示多少种颜色
  • 可以设置颜色透明
  • 不支持动画
  • 扩展名为.png

3)gif适合展示网页插画、logo和网页小图标

  • 可以表示最多256种不同颜色
  • 可以设置颜色透明
  • 支持动画
  • 扩展名是.gif

建议:

  • 复杂颜色的图像和照片则要使用jpeg格式
  • 动态图像要使用gif格式
  • png格式的透明图片要比gif格式的更平滑
  • 这三种图像相对于其他格式的图像文件比较小,适合web页面高效展示

一般情况下用户交互图片都是一些小图标,所以使用png或gif作为用户交互图片;使用CSS的background属性以背景图片的形式为网页添加用户交互图片;推荐把用户交互图片放在同一个文件中,可以提高网络和服务器性能,如:

交互图片

交互图片

具体如何操作呢?后续教头会通过视频给大家详细演示,请继续关注。