如何为您的网站优化HTML5视频

Clipchamp是免费的在线视频编辑器免费试用

分享这个帖子

上次更新日期：2019年10月15日

网上视频继续主导着互联网，现在已成为网页设计中的常见元素。

视频吸引人们的注意力并激发他们的想象力，因此难怪许多主页都嵌入视频，以吸引用户的目光。现在，几乎所有网络浏览器都支持HTML5视频，因此是为您的网站添加背景或标头视频的最佳时机。

Clipchamp上有一些可能非常适合您的网站设计的模板，例如这张精美的动态静图：

将HTML5视频添加到网站的好处多多，但也不要急着动手。过程中可能会出现一些问题，您需要优化视频以确保性能流畅。以下是我们要介绍的内容：

1. 为什么需要为您的网站优化视频

享受HTML5视频的优势时也需要付出代价。自动播放的嵌入式视频内容可能导致页面加载速度缓慢，这是极具杀伤力的流量杀手。如果您的视频与客户使用的浏览器不兼容，那么您也可能会遇到问题。

如果您的HTML5视频太大，则可能会大幅降低您的企业网站速度。对于因为网站要加载而必须看着视频暂停和缓冲的用户来说，体验会不太愉快。

因此，如果访客不得不等待所有元素正确加载和显示，那么本应提升网站总体印象的加分设计功能会变得令人讨厌。

即使您拥有能吸引访客的出色SEO和精彩内容，糟糕的用户体验也可能令这一切前功尽弃。您的网站除了没办法留住访客外，还会引起Google注意。页面加载时间和跳出率都是影响页面Google排名的重要因素，所以确保您为网站压缩视频。

如果您的视频内容在云端，请确保您的云端托管提供商能保证快速加载和正常运行。这样，您便可以为网站访客提供不间断的视频体验。一些云端托管提供商会提供免费试用服务。

浏览器内视频编辑器。

永久免费，数分钟内即可制作专业视频。

如果无法在人们的浏览器中加载，那么世界上最精彩的HTML5视频也于您无用。并非所有视频格式都可以在所有类型的浏览器中加载，因此您需要转换视频，以免出现无法加载出色视频内容的尴尬时刻。这对于确保视频在尽可能多的设备上被尽可能多的浏览器所接受非常重要。

可惜的是，您没办法全都使用同一种格式，而最好选择WebM (VP8) 或MP4 (H264)。这些格式能在大多数浏览器中加载，但不是全部。

实际上，最好是将视频内容转换为WebM，然后再用在网站设计上，并且同时提供替代的MP4格式。这样，在极少数不支持WebM的情况下，将会加载MP4版本。

为您的网页设计优化视频的两种最重要的方法是压缩和转换，您可以使用Clipchamp Utilities免费进行这两种操作！

如上所述，为网页设计优化视频的最佳方法是压缩和转换，这将有助于大幅缩短页面加载的时间和改善播放性能。

但在此之前，我们建议：为了保持质量，通常不鼓励过分降低视频的分辨率和比特率，但是如果您的视频主要在网站的背景播放，则可能可以更灵活处理。这些视频并非访客的唯一关注点，而且由于人们很多时候使用手机浏览，它们通常可以显示在较小的屏幕上。

循环播放的HTML5视频通常显示在透明图层或文本元素后面，并且无论互联网连接状态如何，都需要在任何设备上快速加载和播放。因此，小文件胜过分辨率。Clipchamp的网站实际上就是将此建议付诸行动的实例。现在回到优化您的视频：

您可能已经猜到，如果目标是创建高质量的小型视频文件，那么我们的免费线上视频转换器和视频压缩器Clipchamp是能助您一臂之力的好工具。

它已经深受网站设计师、网站开发人员、图形设计师、WordPress、Wix和 Squarespace创建者的欢迎。网页设计博主和可视网站建设平台（例如Webflow）也推荐专门使用这款实用应用来压缩网站的背景视频和动态静图。

在您将视频上传到服务器、托管提供商或网站构建器之前，Clipchamp会先在浏览器中对其进行本地压缩和转换。因此，它不仅在视频发布到网站后有用，而且可以提升初始上传速度。

我们建议用于网站的视频选择720p，使用Clipchamp的中等或低质量设置。您可以选择网络和移动设备输出选项，移动设备预设生成的输出文件比网络预设的输出文件小，质量也稍低。

您可以使用Clipchamp Utilities轻松转换视频，以提高浏览器的兼容性。只需上传视频，在“自定义设置”下选择所需的格式，Clipchamp的免费转换器即可完成其余工作：