HTML5 视频如何运作？| HTML视频

什么是 HTML5？

HTML5 是超文本标记语言 (HTML) 的最新版本，它是一种用于格式化互联网内容的编码语言。所有网页都使用 HTML 来告诉浏览器如何显示其内容。与早期版本的 HTML 相比，HTML5 具有许多额外的功能，其中之一就是将视频添加到网页的能力。其他 HTML5 功能包括对 SVG 图形的支持、用于定义网站导航的标签以及页眉和页脚标签。

HTML5 视频元素如何运作？

HTML5 视频元素通过指定视频文件的位置，告诉浏览器从另一个来源加载视频文件，这与浏览量加载图像文件的方法类似（图像本身并不存储在 HTML 文件中，浏览器从其他地方抽取图像）。还可以包含宽度、高度和其他属性来告诉浏览器如何显示视频。其他标记代码可以告诉浏览器将其放置在页面的哪个位置。

HTML5 视频标签是 < video>，与其他 HTML 元素相似，该标签使用 < /video> 来闭合。

在这两个标签之间，有一个 <source> 标签来表明视频文件的位置。在这个标签中，视频源 (src) 和文件类型 (type) 是按以下方式表示的：

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

以下重要属性也可以放在 <video> 标签内：

• 宽度：这以像素指定视频的宽度。像素的数量用双引号引起来：width="370"
• 高度：这指定视频的高度。它的运作方式与宽度属性相似。
• 播放、暂停、音量：这些控件使用户能够控制视频播放。将控件添加到 <video> 标签以包含它们。

视频的备用来源也可以放在 <video> 标签之间，以防浏览器不支持第一种文件格式。浏览器始终使用列出的第一个来源。

此外，文本可以放在 <video> 标签之间；只有当用户的浏览器不支持 HTML5 视频时，才会显示该文本。

把所有这些放在一起，嵌入视频的 HTML5 代码可能看起来是这样的：

<video controls width="370" height="130">
  <source src="example.mp4" type="video/mp4">
  <source src="alternate-example.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>

还可以在视频元素中使用其他一些属性，例如 autoplay（用于在页面加载时立即播放视频）、loop（用于循环播放视频）、muted（用于静音视频）和 poster（用于在视频加载前显示一张图像）。Mozilla 为这些属性提供了不错的文档记录。

HTML5 使用什么流媒体协议？

HTML5 本身不是流媒体协议。使用 HTML5 构建的网站可能使用几种不同的流媒体协议来播放视频，包括HTTP 实时流 (HLS) 和 MPEG-DASH 。这是在服务器端配置的，而不是在 HTML 标记代码中配置。

所有浏览器都支持 HTML5 吗？

所有主要浏览器都支持 HTML5，这意味着它们可以解释不属于早期 HTML 版本的 HTML5 标签。但是，并非所有浏览器都支持 HTML5 的所有功能。开发人员必须记住，某些用户可能拥有无法解释 HTML5 视频元素的过时版本的浏览器。

在 HTML5 之前，网站如何包含视频内容？

在 2008 年 HTML5 发布之前，视频通常是使用 Adobe Flash 插件嵌入的。HTML5 使开发人员只需使用几个 HTML 标签就可以在网页上嵌入视频，无需插件。因此，Flash 变得没那么必要了，Adobe 最终在 2020 年 12 月 31 日停止了对 Flash 的支持。

如今，大多数用户无需额外的浏览器插件即可流式传输视频，开发人员可以使用多种方法嵌入视频而无需依赖插件。HTML5 视频元素是最常用的方法之一。

什么是浏览器插件？

浏览器插件是一种软件，它为浏览器添加了原本不包含的功能。过去的情况是浏览器不包括播放视频的能力。 Adobe Flash 等第三方插件有助于填补这一空白。

不过，插件也可能带来安全威胁。它们在浏览器和网站带来的攻击面之上，多增加了一个攻击面，即外部攻击者入侵浏览会话的另一种方式。此外，插件可能会降低页面功能。依赖插件意味着多个软件必须正常且快速地运行才能加载网页，而不仅仅只是一个软件。

如果视频是原生嵌入的（这在 HTML5 中是可能的），它会加载得更快。避免使用插件也更安全。

如何嵌入 Cloudflare Stream 视频？

Cloudflare Stream 是一个集视频编码、存储、交付和播放于一体的点播视频平台。请参阅 Cloudflare Stream 文档，了解如何将视频文件上传到 Stream 并将它们嵌入网页。或者，在开始之前了解有关 Cloudflare Stream 的更多信息。