HTML5视频和音频：标记-SitePoint-css教程-PHP中文网

首页

web前端

css教程

HTML5视频和音频：标记-SitePoint

尊渡假赌尊渡假赌尊渡假赌

Feb 18, 2025 pm 12:49 PM

HTML5视频和音频标签详解：构建响应式视频播放器

本文节选自Alexis Goldstein、Louis Lazaris和Estelle Weyl合着的《HTML5 & CSS3 for the Real World, 2nd Edition》一书。本书在全球各大书店有售，您也可以在此处购买电子书版本。

核心要点

HTML5的视频和音频标记允许直接在HTML代码中嵌入视频和音频元素，无需外部插件或播放器。
HTML5视频和音频标记包含多个属性来控制这些元素的行为，例如autoplay（自动播放）、controls（控件）、loop（循环）、muted（静音）和source（源）。
“HTML5 video file not found”（HTML5视频文件未找到）错误通常发生在浏览器无法找到或访问video标签的source属性中指定的视频文件时。
HTML5本身不提供视频内置标注功能，但可以使用JavaScript和CSS创建自定义标注。
通过在video标签内包含多个source标签，可以为HTML5视频指定多个源，从而最大限度地兼容不同的浏览器。

标记

在处理完容器、编解码器和许可问题后，我们来研究一下video元素及其相关属性的标记。

在网页中包含HTML5视频最简单的方法如下：

<video src="example.webm"></video>

正如前面几节所述，这仅在有限的浏览器中有效。然而，这是使HTML5视频在某种程度上工作的最小代码。在一个理想的世界里，它应该在任何地方都能工作——就像img元素一样——但这还需要一段时间。

与img元素类似，video元素也可以包含width和height属性：

<video height="280" src="example.webm" width="375"></video>

尽管可以在标记中设置尺寸，但这不会影响视频的纵横比。例如，如果前面示例中的视频实际上是375×240，而标记如所示，则视频将在指定的280像素空间内垂直居中。这可以防止视频过度拉伸并显得失真。

width和height属性仅接受整数，其值始终为像素。当然，这些值可以通过脚本或CSS覆盖。

启用原生控件

任何嵌入式视频都少不了让用户能够播放、暂停、停止、快进快退或调整音量。 HTML5的video元素包含一个controls属性，它可以做到这一点：

<video src="example.webm" width="375" height="280" controls></video>

controls是一个布尔属性，因此不需要值。它在标记中的包含告诉浏览器使控件对用户可见且可访问。

每个浏览器都负责内置视频控件的外观。图5.1和图5.2显示了这些控件在不同浏览器中的外观差异。

HTML5 Video and Audio: The Markup - SitePoint

图5.1. Chrome中的原生视频控件

图5.2. Firefox中的原生视频控件

图5.3. Internet Explorer中的原生视频控件

图5.4. Opera中的原生视频控件

autoplay属性

我们很想忽略这个属性，因为在大多数情况下使用它都是不可取的；但是，在某些情况下它可能是合适的。布尔型autoplay属性完全符合其名称的含义：它告诉网页尽快播放视频。

通常情况下，这是一种不好的做法；我们大多数人都知道，如果网站在加载时就开始播放视频或音频，尤其是当我们的扬声器音量调大时，这会多么令人恼火。可用性最佳实践规定，网页上的声音和运动应该只在用户请求时触发。但这并不意味着永远不应该使用autoplay属性。

例如，如果相关的页面只包含一个视频——也就是说，用户点击链接到某个页面只是为了观看特定视频——那么它可以自动播放，具体取决于视频的大小、周围内容、观看平台和受众。

以下是使用此属性的方法：

<video src="example.webm"></video>

警告：移动浏览器忽略autoplay

许多（如果不是全部）移动浏览器都会忽略autoplay属性，因此视频总是会在用户按下播放按钮后才会开始播放。考虑到移动带宽通常有限且昂贵，这是合理的。

loop属性

另一个在使用前应该三思而后行的可用属性是布尔型loop属性。同样，它也很容易理解：根据规范，此属性将告诉浏览器“在到达媒体资源末尾时返回到媒体资源的开头”。

因此，如果您创建了一个网页，其唯一目的是让访问者感到厌烦，它可能包含如下代码：

<video height="280" src="example.webm" width="375"></video>

自动播放和无限循环！我们只需要删除原生控件，就可以得到最糟糕做法的三重奏。

当然，与autoplay一样，在某些情况下loop也很有用：例如，一个基于浏览器的游戏中，当页面打开时，环境声音和音乐应该连续播放。

preload属性

与前面讨论的两个属性相比，preload属性在许多情况下都非常方便。preload属性接受三个值之一：

auto：表示视频及其关联的元数据将在视频播放前开始加载。这样，浏览器就可以在用户请求时更快地开始播放视频。
none：表示视频不应该在用户按下播放按钮之前在后台加载。
metadata：与none类似，但即使视频本身不会加载，任何与视频相关的元数据（例如，其尺寸、持续时间等）也可以预加载。

preload属性在省略时没有规范定义的默认值；每个浏览器都会决定这三个值中的哪一个应该是默认状态。这是有道理的，因为它允许在良好连接的台式机浏览器上自动预加载视频和/或元数据，而不会产生任何实际的不利影响；但它允许移动浏览器默认为metadata或none，因为许多移动用户具有受限带宽，并且更愿意选择是否下载视频。

poster属性

当您尝试在网络上观看视频时，通常会显示视频的单个帧以提供其内容的预告。poster属性使选择此类预告变得容易。此属性与src类似，将通过URL指向服务器上的图像文件。

以下是带有poster属性的video元素：

<video src="example.webm"></video>

如果省略poster属性，则默认“海报”将是视频的第一帧，该帧将在加载后立即显示。

muted属性

muted属性（布尔型）控制video元素音频轨道的默认状态。

添加此属性将导致视频的音频轨道默认为静音，这可能会覆盖任何用户偏好。这只会控制元素的默认状态——用户与控件或JavaScript交互可以更改此状态。

将其添加到我们的video元素中：

<video height="280" src="example.webm" width="375"></video>

在以前版本的HTML5规范中，有一个名为audio的属性，它取值为muted。新的muted属性替换了现在已过时的audio属性。

添加对多种视频格式的支持

正如我们所讨论的，目前没有办法使用单个容器格式来提供您的视频，尽管这确实是video元素背后的理念，也是我们希望在不久的将来实现的目标。为了包含多种视频格式，video元素允许定义source元素，以便您可以允许每个浏览器使用其选择的格式显示视频。这些元素与video元素上的src属性具有相同的功能，因此如果您提供source元素，则无需为video元素指定src。

为了实现完全的浏览器支持，以下是声明source元素的方法：

<video src="example.webm" width="375" height="280" controls></video>

source元素（奇怪的是）带有一个src属性，该属性指定视频文件的位置。它还接受一个type属性，该属性指定所请求资源的容器格式。此后一个属性使浏览器能够确定它是否可以播放相关文件，从而防止它不必要地下载不受支持的格式。

type属性还允许指定编解码器参数，该参数定义所请求文件的视频和音频编解码器。以下是带有指定编解码器的source元素：

<video src="example.webm"></video>

您会注意到，type属性的语法已略微修改以适应容器和编解码器值。围绕值使用的双引号已更改为单引号，并且另一组嵌套的双引号专门用于编解码器。

乍一看这可能有点令人困惑，但在大多数情况下，一旦您有了编码视频的一套方法（我们将在本章后面讨论），您只需复制粘贴这些值即可。重要的是，您为指定文件定义正确的值，以确保浏览器可以确定它可以播放哪个（如果有）文件。

注意：您需要哪些格式？

根据您网站的目标受众，您可能不需要三个source元素来获得完整的浏览器支持。对视频和音频编解码器和容器的支持非常好，您可能只需要一两种组合。要帮助您决定使用哪些格式，请务必查看Can I use上的最新浏览器支持信息。

源顺序

三个source元素作为video元素的子元素放置，使用的浏览器将选择它识别的任何容器/编解码器格式——只下载它需要的资源并忽略其他资源。声明了三个文件格式后，我们的代码现在如下所示：

<video height="280" src="example.webm" width="375"></video>

您会注意到，我们的代码现在没有video元素上的src属性。如前所述，除了冗余之外，包含它还会覆盖source元素中定义的任何视频文件，因此在这种情况下必须将其省略。

不支持HTML5视频的浏览器怎么办？

我们video元素中包含的三个source元素将涵盖所有现代浏览器，但我们尚未确保我们的视频将在旧版浏览器中播放。如前所述，您可能仍然有相当一部分用户使用不支持HTML5视频的浏览器。这些用户中的大多数都在Internet Explorer 9之前的某个版本上。

为了保持优雅降级的原则，video元素的设计使得旧版浏览器可以通过其他方式访问视频。任何无法识别video元素的浏览器都将简单地忽略它及其source子元素。但是，如果video元素包含浏览器识别为有效HTML的内容，它将读取并显示该内容。

我们可以为那些不支持的浏览器提供什么内容？根据Adobe的数据，超过10亿台式机用户在其系统上安装了Flash Player插件。而且这些Flash插件实例中的大多数都是9版或更高版本，它们支持MPEG-4视频容器格式。考虑到这一点，为了允许Internet Explorer 8及更早版本（以及其他不支持HTML5视频的旧版浏览器）播放我们的视频，我们可以声明一个嵌入式Flash视频作为后备。以下是The HTML5 Herald上视频的完整代码，其中包含Flash后备代码：

<video src="example.webm" width="375" height="280" controls></video>

我们将跳过详细介绍这段新添加的代码是如何工作的（毕竟这不是一本关于Flash的书！），但以下是一些关于此标记添加的几点需要注意的地方：

object元素上的width和height属性应与video元素上的属性相同。
为了播放文件，我们使用LongTail Video的开源JW Player，它可免费用于非商业用途，但您可以使用任何您喜欢的视频播放器。
Flash视频代码有它自己的后备——如果Flash视频代码无法工作，则显示图像文件。
第四个param元素定义要使用的文件（example.mp4）。如前所述，现在大多数Flash播放器实例都支持使用MPEG-4容器格式播放视频，因此无需编码其他视频格式。
支持HTML5视频的HTML5启用浏览器会按照规范指示忽略video元素内不是source标签的任何内容，因此后备在所有浏览器中都是安全的。

除了Flash后备内容外，您还可以提供一个可选的下载视频链接，允许用户访问视频的本地副本并在空闲时观看。这将确保没有人无法观看视频。

这里最后要提到的一点是，与额外的source元素一样，您的网站上可能没有来自不支持HTML5视频浏览器的访问者，或者您可能并不关心使用旧版浏览器的少量用户。在这两种情况下，您可以轻松地省略Flash后备内容，从而简化代码。

HTML5视频和音频标记的常见问题解答

什么是HTML5视频和音频标记？

HTML5视频和音频标记是HTML5中引入的一项功能，它允许您将视频和音频元素直接嵌入到HTML代码中。这消除了对外部插件或播放器的需求，为用户提供了无缝的多媒体体验。该标记由<video></video>和<audio></audio>标签以及一些属性组成，这些属性允许您控制这些元素的行为，例如autoplay、controls、loop、muted和source。

为什么我会收到“HTML5 video file not found”错误？

“HTML5 video file not found”错误通常发生在浏览器无法找到或访问<video></video>标签的source属性中指定的视频文件时。这可能是由于多种原因造成的，例如文件路径不正确、文件删除或服务器问题。确保文件路径正确且视频文件可访问以解决此错误。

如何为我的HTML5视频添加注释？

为HTML5视频添加注释包括在视频上添加文本、形状或其他元素，以提供更多信息或突出显示视频的某些部分。虽然HTML5不提供内置注释功能，但您可以使用JavaScript和CSS创建自定义注释。或者，您可以使用VEED.IO等在线工具，这些工具提供易于使用的视频注释工具。

如何解决“HTML5 video file not found”错误？

解决“HTML5 video file not found”错误包括识别错误的原因并解决它。如果文件路径不正确，请更正它。如果文件已被删除，请恢复它或将其替换为新文件。如果存在服务器问题，请联系您的服务器管理员或托管提供商以寻求帮助。在某些情况下，视频文件可能已损坏，在这种情况下，您需要修复或替换该文件。