了解基本视频。提高互动度。
您是否在考虑向您的网站添加视频？随着设备和网络连接的速度和性能不断提高，您可以不再局限于图像，也可以将视频添加到您用于构建 Web 的工具箱中。研究表明，包含视频的网站可以提高互动度和销售额。因此，即使您尚未向自己的网站添加视频，添加视频也可能只是时间问题。
您添加到网站的视频文件很有可能成为下载的最大文件。因此，请务必确保这些文件能够快速稳定地播放给您的所有客户。虽然视频可以提高互动度和客户满意度，但视频无法播放或播放时停滞仍会导致客户失望。本博文重点介绍如何使用 HTML5 <video> 标记传送视频，因此不会介绍流式视频。
下面我们开始步入正题！
<video> 标记
看起来很明显，对吧？如需添加视频，您必须添加 <video> 标记，指向某个来源，然后就可以参加比赛了！
<video src="myVideo.mp4">
你说得对。大体上讲，这就是将视频添加到网页所需的全部操作。不过，您还可以将许多属性添加到视频标记中，以改进视频的布局和呈现效果。
<source> 标记
改进在网页上传输视频的最佳方式或许是优化向浏览器传输的文件。可采用的方法是使用 <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 分钟的电影的差异：
| 编解码器 | 文件大小 |
|---|---|
| VP8 | 5.5 MB |
| VP9 | 4.2 MB |
| H.265 | 5.4 MB |
| H.264 | 16.1 MB |
通过传送较小的文件，可以进行最佳性能优化，从而更好地传送视频。下载的视频越小，视频播放就越快，视频缓冲区填充的速度也会更快。这样可以减少视频播放期间的停顿次数。此外，服务器负载会降低，这弥补了多个视频文件会增加的存储空间要求。
预加载属性
只有在本地下载并存储了一些视频后，视频才能开始播放。使用预加载属性，您可以控制在网页加载时下载多少视频。预加载属性有三个值：auto、metadata 和 none。
preload='auto'
如果使用 'auto'，则无论用户是否按播放按钮，都将下载整个视频。这样可以实现快速视频播放，因为视频会在用户按下播放按钮之前下载到本地。从流量使用（和服务器负载的角度）来看，只有在极有可能用户观看的视频时，才应使用此选项。否则，完整视频下载的所有数据将会浪费。
preload='metadata'
这是 Chrome 和 Safari 上预加载功能的默认设置。使用 'metadata' 时，系统会下载视频的前 3%。虽然这与 'auto' 相同，但仅下载视频 3% 的服务器/流量使用成本远低于整个视频，同时仍能确保视频的一部分存储在本地以实现快速视频启动。
preload='none'
这样做可以节省最多的数据，但按下播放按钮时，视频启动速度会变慢，因为按照设置要求，视频会在设备本地预加载 0 千字节。对于已经播放但不太可能播放的视频，此设置是合适的。如果用户在浏览器中启用了精简模式，也可使用此方法。
poster
您可能希望在视频开始播放之前，在视频窗口上显示一张海报图片：
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
没有海报的视频在开始播放前显示黑屏。
带有海报的视频更具吸引力。
通过在网页上添加照片而不是黑框，让您的网站更具吸引力和互动性。不过，使用 poster 属性会在视频下载开始之前添加图片下载。因此，您可以考虑避免为自动播放的视频添加海报（因为额外的下载内容会延迟视频下载）。
播放控件
添加 controls 属性可添加播放控件。如果没有这些功能，客户就无法开始播放或停止播放视频。您应该为视频添加此设置，以便用户执行停止和暂停、更改音量等操作。对于背景视频或循环视频，建议您省略此属性。
已设为静音
muted 属性可使播放在静音状态下开始播放。如果未提供任何控件，相应控件将在整个播放过程中保持静音。如果确实如此，可以从视频中移除该音轨。这样可以进一步缩减向客户传送的视频文件的大小。
与容器和编解码器一样，移除音频文件（也称为多路复用）也超出了本文的范围。您可以在媒体操纵备忘单中找到相关说明。
循环数
如需提交会循环播放内容的视频（例如动画 GIF），请添加 loop 属性。由于视频文件通常比动画 GIF 小得多，因此借助此机制，您可以将 GIF 替换为视频文件。
正在自动播放视频
如果您希望视频立即播放（例如，作为背景视频或像动画 GIF 一样循环播放的视频），可以添加 autoplay 属性：
<video src="myVideo.mp4" autoplay>
也就是说，要让视频在移动浏览器中自动播放，还必须添加 muted 属性：
<video src="myVideo.mp4" autoplay muted>
总结
只需向您的网站添加视频，就能为客户增加一个新的互动领域，但以恰当的方式提供内容至关重要，即确保视频播放流畅且无中断。使用 <video> 标记的内置属性可以极大地帮助您向访问您网站的所有用户投放完美的视频。