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

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

学习目标

阅读本文后,您将能够:

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

复制文章链接

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