在你的网站上使用视频背景,是抓住浏览者注意力最好的办法。视频作为背景设计功能,在近年变得很受欢迎,而且在所有的现代浏览器中,以HTML5视频支持的形态继续增长,并且在将来可能成为默认设置。

对于如何优化视频以用于网页设计,在网上最常见的问题中,创建并运用背景视频,有2个普遍的问题

1)压缩视频在网站上使用

第一点是档案在编辑或授权应用程序输出后,往往容量太大。这对有限带宽和网络连接较差的设备,是一个很大的问题。它会造成视频暂停,以及在完整加载前,必须不断缓冲。

本来是为网站加分的设计功能,却会因此变成是对访问者的干扰,他们必等到加载完成,才能看到视频。

compress-web-design

大型视频不仅对页面加载时间有不好的影响,也会形成负面的用户体验,特别是当用户第一次访问你的网站,还没有任何缓存。这也有损网站的搜索引擎优化排名,因为页面加载时间,是谷歌和其他业者考虑的重要因素。因此,在上载视频到网站前,进行压缩是最好的办法。

2)为HTML5转换视频

第二点,你从同事那边获取的视频,或是编辑软件创建的视频,它们的格式在多数的浏览器(Chrome、Firefox、Edge、Opera、Internet Explorer、Safari等等)中,运行时常常会出现问题,因为这些浏览器在没有附加插件的情况下,往往只能识别某些视频格式、视频编解码器和(若是在容器内)音频编解码器。

MP4和WebM无可争议的,是网站上最普遍的视频格式。由于MP4可能会有使用许可证的问题,所以在网站上使用前,最好将视频转换成WebM(VP8),并选择性准备一个MP4(H264)视频,为不支持WebM的浏览器,作为替代视频。

这样做能确保视频,尽可能被更多的浏览器、手机、平板电脑、膝上电脑和操作系统组合所接受。不幸的是,目前没有一个格式/视频编解码器/音频编解码器组合,能够一起管制它们全部。

优化视频以用于网页设计

如上所述,为网页设计优化视频的方法,就是减少视频档案的大小,能够大大地改善页面加载时间,还有回放效能。

额外的选项,包括了降低视频的解析度和品质(压缩等级和比特率)。另外,就是选择一个受到广泛认可的视频格式。

我们通常不建议降低太多的解析度和比特率,因为这2点对视频的品质很重要。不过,如果是将视频放在网站的背景内,你就不用太担心这一点,因为访问者通常不会太过专注于这类短片。

事实上,循环的HTML5视频会在透明层,和/或文字元素背后播放,同时也是一个辅助设计的项目,需要在访问者的设备内,无论网络连接的状态,都得迅速加载和播放。

因此,小型的档案在某种程度上,更胜于降低解析度、比特率和视频品质。

你可能猜到了,如果想要创建一个品质优良的小型视频档案,Clipchamp的线上视频转换器和视频压缩器,是一个很棒的工具。

网页设计师、网站开发者、平面设计师、WordPress、Wix和Squarespace创造者都很喜欢用它。它也受到网站设计部落客和像是Webflow的视觉网站建设平台所推荐使用,特别是在压缩网站的背景视频和动态照片*方面。

 

compress-video-web-design

 

Clipchamp在你的浏览器内,在地压缩与转换视频,然后再上载到你的伺服器、托管供应商或网站建设器。因此,它除了在将视频上载到网站时有用,也能够让初始上载更快速。

在网站使用方面,我们通常建议将视频压缩到至少720p,选择Clipchamp的中等或低等品质设定。网页和手机输出选项都有——手机预设将生成更小的输出档案,品质会比网页版本更低一些。

总而言之,背景视频的最佳设定,网页是720p、中等品质、MP4或WebM;手机是720p、中等品质、MP4。根据导入的档案和品质,以及Clipchamp生成的输出视频档案大小的不同而定,你可以不断尝试不一样的组合设定,制造出你最满意的结果。

 

HTML5-background-video

 

我们明白多数人会认为,应该使用最好的视频品质1080p,或是更高的品质。不过,考虑到访问者在任何网站中,停留的平均时间少过15秒,我们就不建议你选择高品质视频。你必须在非常重要的几秒内,让人留下好印象。我们的线上视频转换器可以帮到你。


*什么是动态照片? 看看这个subreddit还有它美丽的例子。