#main-nav-header { display:none; }

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

HTML5 是 HTML 的最新版本。与以前的 HTML 版本不同，HTML5 使开发人员能够使用视频标签轻松将视频添加到网页中。

学习目标

阅读本文后，您将能够：

定义 HTML5
描述 HTML5 如何在没有插件的情况下实现流式传输
了解如何使用 HTML5 视频元素

想要继续学习吗？

订阅 TheNET，这是 Cloudflare 每月对互联网上最流行见解的总结！

复制文章链接

什么是 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 的更多信息。