基本视频不再局限于图片，适用于 Web 应用

了解基本视频。提高互动度。

Doug Sillars

您是否考虑过在网站上添加视频？随着设备和网络连接变得更快、更强大，您可以将视频添加到构建网站的工具箱中，从而不仅仅局限于图片。研究表明，包含视频的网站可提高互动度和销售额。因此，即使您尚未在自己的网站上添加视频，也只是时间问题。

您添加到网站的视频文件很可能是下载的最大文件。因此，请务必确保文件的制作方式能够让所有客户都能快速稳定地播放。虽然视频可以提高互动度和客户满意度，但如果视频无法播放或在播放过程中卡顿，可能会导致客户感到沮丧。本文重点介绍如何使用 HTML5 <video> 标记来投放视频，因此不涉及流式视频。

我们开始吧！

<video> 标记

不言自明，对吧？如需添加视频，您必须添加 <video> 标记，指向来源，然后就可以开始比赛了！

<video src="myVideo.mp4">

您是对的。概括来讲，要将视频添加到网站上，只需执行上述操作即可。不过，您可以向视频标记添加许多属性，以改善视频的布局和传送方式。

<source> 标记

若要改进在 Web 上传送视频的效果，最好的方法可能是优化传送到浏览器的文件。具体方法是使用 <source> 标记：

<video>
  <source src="myWebmVideo.webm" type="video/webm">
  <source src="myh265Video.mp4" type="video/mp4">
  <source src="myh264Video.mp4" type="video/mp4">
</video>

这引用了三个单独的源文件。浏览器会从顶部开始，选择它可以使用的第一个格式和编解码器。在视频领域，文件格式（通常称为容器）可以使用不同的编解码器进行保存，每种编解码器都有不同的属性。（点击此处了解详情。） 在上例中，首选是 WebM 格式（可使用 VP8 或 VP9 编解码器进行编码），并且（在撰写本文时）有 78% 的全球用户支持该格式。第二种选择是 mp4 的 H.265 编解码器，iOS 和更新型号的 Mac 均支持此编解码器。这些编解码器版本较新，改进了数据压缩，同时提供的视频质量与旧视频格式相同。

列表中的最后一个选项是 H.264 mp4，它有 92% 的全球用户支持，但属于旧版格式，因此通常比 WebM 或 H.265 视频大得多。下面的示例展示了一部时长为 2 分钟的电影的差异：

提交体积较小的文件是您可以采取的最佳性能优化措施，有助于更好地提交视频。下载的视频越小，视频播放速度就越快，视频缓冲区的填充速度也会随之加快。这样可以减少视频播放过程中的停顿次数。此外，服务器负载会降低，从而弥补多个视频文件增加的存储空间需求。

preload 属性

只有下载并存储到本地后，视频才能开始播放。您可以使用 preload 属性控制网页加载时下载的视频量。preload 属性有三个值：auto、metadata 和 none。

preload='auto'

如果使用 'auto'，则无论用户是否按下“播放”，都会下载整个视频。这样一来，系统会在用户按下播放按钮之前将视频下载到本地，从而实现快速视频播放。从数据使用量（以及服务器负载）的角度来看，只有在视频很有可能被观看时，才应使用此功能。否则，完整视频下载的所有数据都将浪费掉。

preload='metadata'

这是 Chrome 和 Safari 上的预加载默认设置。使用 'metadata' 时，系统会下载视频的前 3%。虽然这与 'auto' 存在一些限制，但与下载整个视频相比，下载视频的 3% 所产生的服务器/数据使用费用要低得多，同时仍可确保将部分视频存储在本地以快速启动视频。

preload='none'

此设置可节省最多的数据，但会导致按下“播放”按钮时视频启动速度变慢，因为正如该设置所述，系统不会在设备本地预加载任何视频数据。对于存在但不太可能播放的视频，此设置非常适合。如果用户在浏览器中启用了精简模式，系统也可能会使用此值。

海报

您可能希望在视频开始播放之前在视频窗口上显示海报图片：

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">

在网页上添加照片（而非黑盒子）有助于提高网站的互动度和吸引力。不过，使用 poster 属性会在视频下载开始之前添加图片下载。因此，您可以考虑避免为自动播放的视频添加海报（因为额外下载会延迟视频下载）。

播放控件

添加 controls 属性会添加播放控件。如果没有这些信息，您的客户将无法开始或停止播放视频。您应为视频添加此项，以便用户可以停止和暂停、调节音量等。对于后台或循环播放的视频，您可能需要忽略此属性。

已设为静音

muted 属性会导致以静音状态开始播放。如果未提供任何控件，则在整个播放过程中，视频将保持静音状态。如果这是您的意图，不妨从视频中移除音轨。这进一步缩减了传送给客户的视频文件的大小。

与容器和编解码器一样，移除音频文件（也称为解复用）也超出了本文的讨论范围。您可以在媒体操纵备忘单中找到相关说明。

循环数

如需提交会循环播放内容的视频（例如动画 GIF），请添加 loop 属性。由于视频文件通常比动画 GIF 小得多，因此借助此机制，您可以将 GIF 替换为视频文件。

自动播放视频

如果您希望视频立即播放（例如，作为背景视频或像 GIF 动画一样循环播放的视频），可以添加 autoplay 属性：

<video src="myVideo.mp4" playsinline autoplay>

不过，为了让视频在移动浏览器上自动播放，还必须添加 muted 属性：

<video src="myVideo.mp4" playsinline autoplay muted>

总结

只需在网站上添加视频，即可为客户开辟新的互动领域，但请务必妥善提供内容，确保视频能够流畅播放且不会卡顿。使用 <video> 标记的内置属性非常有助于向访问您网站的每位用户展示完美的视频。