概述
在本文中，我们将了解 HTML5 的视频和音频标签。<video> 标记用于在文档中嵌入视频内容，例如影片剪辑或其他视频流。<audio> 标记用于在文档中嵌入声音内容，例如音乐或其他音频流。 HTML5 为您提供了两个标签 - <video> 和 <audio>。我们将在本文中学到很多关于这两个的信息，因此请确保您阅读本文直到最后。
HTML <video>标签
顾名思义，<video>标签用于在浏览器上显示视频文件。您可以使用此标签在网站上显示您创建的告别视频。您可以在网站上显示的视频文件类型有限制。您只能使用 .mp4、.webm 和 .ogg 文件类型。除此之外，格式不会显示在网页上。
现在，简单地将这些标签放在 HTML 文本中并不能保证您的视频会被显示。必须指定视频的路径。您可以使用 <source> 标签来执行此操作。
语法
<video>
<source src="video-path.mp4" type="video/mp4">
</video>
以上是 <video> 标签的语法。如您所见，我们使用“src”属性提供了 mp4 文件的路径。这将在您的网站上显示您的视频。
现在就像这样，<video>标签有许多可用的属性，它允许您为视频执行几乎任何操作。让我们看看属性。
属性
HTML 标签中的属性用于为我们的标签添加一些自定义功能。它用于提供有关标签的额外信息，例如控件、宽度、高度等。我们在上面已经看到，仅仅提供一个<video>标签是不够的。您必须编写属性“src”以及 <source> 标记并传递视频的路径才能显示视频。以下是您可以在 <video> 标记中使用的属性列表。
- 宽度和高度 - Height 和 Width 属性用于指定 HTML 中视频大小的高度和宽度。通常，每个视频都有特定的尺寸，例如 16×9（垂直视图）或 9×16（水平视图）。同样，您可以选择视频分辨率的宽度和高度。
例
<video>
<source src="bridge.mp4" type="video/mp4">
</video>
<video width="320" height="240">
<source src="bridge.mp4" type="video/mp4">
</video>
输出
我希望你能理解视频的大小是如何改变的。在这些属性中传递的值的单位始终是像素。值越大，大小越大。
- 控制此属性允许我们显示各种控件，例如播放、暂停、音量调节、全屏图标和 3 个点，甚至允许您通过视频下载视频文件。您只需要将控件编写为属性即可。
例
<video>
<source src="bridge.mp4" type="video/mp4" controls>
</video>
输出
在输出上，您现在可以看到播放和暂停按钮、音频按钮、全屏按钮等控件。
- 海报每当视频显示在屏幕上时，下载然后显示都需要一些时间。如果文件大小很大且连接性较低，您可能会看到加载图标。相反，您可以使用 poster 属性在视频上添加图像，该图像在视频完全加载后会消失。
例
<video controls poster="image.png">
<source src="bridge.mp4" type="video/mp4">
</video>
输出
请注意，显示的是图像，而不是加载图标。图像将一直存在，直到您播放视频。
- "静音" 假设您的视频有一些音乐，并且您不希望在视频播放时最初播放它。您可以使用此属性来执行此操作。让我们看一下这个例子。
<video controls muted>
<source src="ocean.mp4" type="video/mp4">
</video>
输出
播放视频时，您不会听到任何声音，因为视频将被静音。
- 自动播放此属性的作用是，一旦视频完全下载，它就会自动播放视频。用户不必按下播放按钮，因为视频将自行启动。这里唯一的限制是您必须使用“muted”属性和“autoplay”属性。
<video autoplay muted controls>
<source src="bridge.mp4" type="video/mp4">
</video>
输出
现在，如您所见，视频正在自动播放。
- 循环
loop 属性允许我们无限次重复特定视频。视频一结束，它就会重新开始。让我们看一下这个例子。
<video controls loop>
<source src="bridge.mp4" type="video/mp4">
</video>
输出
播放视频直到最后，您将看到视频将从头开始恢复播放。
- 预紧力此属性允许您询问用户他们希望在页面加载后如何加载您的视频。它基本上有三个值 - auto、metadata 和 none。
- 自动值将在页面加载时加载整个视频。
- 元数据值在页面加载时将仅加载视频的元数据。
- 当页面加载时，none 值根本不会加载视频。
<video controls preload="auto">
<source src="bridge.mp4" type="video/mp4">
</video>
<video controls preload="metadata">
<source src="bridge.mp4" type="video/mp4">
</video>
<video controls preload="none">
<source src="bridge.mp4" type="video/mp4">
</video>
输出
- 全局属性
HTML 提供了一些全局属性。顾名思义，我们可以得到提示，这些属性可以被 HTML 的所有元素使用。下面是所有全局属性的列表。
| 属性 | 描述 |
|---|---|
| accesskey | 指定用于激活/聚焦元素的快捷键 |
| class | 指定元素的一个或多个类名（指样式表中的类） |
| contenteditable | 指定元素的内容是否可编辑 |
| contextmenu | 指定元素的上下文菜单。当用户右键单击元素时，将显示上下文菜单 |
| data-* | 用于存储页面或应用程序专用的自定义数据 |
| dir | 指定元素中内容的文本方向 |
| draggable | 指定元素是否可拖动 |
| dropzone | 指定拖动的数据在放置时是复制、移动还是链接 |
| hidden | 指定元素尚不相关或不再相关 |
| id | 指定元素的唯一 ID |
| lang | 指定元素内容的语言 |
| spellcheck | 指定是否检查元素的拼写和语法 |
| style | 指定元素的内联 CSS 样式 |
| tabindex | 指定元素的 Tab 键顺序 |
| title | 指定有关元素的额外信息 |
| translate | 指定是否应翻译元素的内容 |
- 事件属性
HTML 有一些全局事件属性，每当浏览器上发生事件时都会调用这些属性，例如鼠标单击、键上、键下、鼠标移动、加载、拖动等。您为与浏览器界面交互所做的任何事情都是一个事件。而 <video> 标签支持所有这些。您可以在 Scaler 网站上找到事件属性的完整列表。
HTML <audio>标签
就像 <video> 标签用于将视频文件添加到您的网站一样，<audio> 标签用于将 <audio> 文件添加到您的网页。HTML5 提供了此标签，您可以在其中将音乐/音频文件嵌入到 HTML 文档中，而不是使用任何第三方插件（外部库）。您可以将 3 种类型的文件添加到音频标签中：
- .mp3
- .wav
- .ogg
语法
<audio>
<source src="music.mp3" type="audio/mp3">
</audio>
以上是在 HTML 文档中使用音频文件的语法。现在仅仅写这个是不够的。您必须在 src 属性中指定音频文件的文件路径。我们将在属性部分看到它们。基本上，<audio>标签与视频标签几乎相同。甚至有些属性也是一样的。让我们看看其中的一些。
属性
我希望你现在对属性有了更好的了解。因此，事不宜迟，让我们从第一个开始。-
- 来源“src”属性用于将音频文件添加到 HTML 文档中。您必须在此处提供音频文件的路径，然后只有音频才会在浏览器上播放。
例
<audio src= "audio.mp3"> </audio>
即使这会将音频文件添加到您的网页，您也无法看到它。这是因为您必须添加另一个称为“控件”的属性，该属性将为您提供播放、暂停和音频按钮等控件，就像视频标签一样。
这里我们只添加了一个音频文件，（.mp3）。如果浏览器不支持这种类型的音频文件怎么办？在这种情况下，您需要有一个备份文件，如果第一个文件不受支持，该文件将被播放。例如，如果不支持 .mp3 文件，那么我将添加另一个文件（假设.ogg）。如果未播放此文件.mp3则该文件将充当备份文件。
目前，您不能在 <audio> 标记中使用 src 属性，因为“src”只能有一个文件路径。我们需要添加超过 1 个文件路径。这就是为什么您必须为名为 <source> 的单独标签指定一个单独的标签。
让我们使用最后一个示例来理解
<audio>
<source src= "audio.mp3" type="audio/mp3">
<source src= "audio.ogg" type="audio/ogg">
</audio>
正如你所看到的，我在这里使用了两个音频文件。因此，我们必须使用 <source> 标签。
- 控制下一个属性是 controls 属性，用于在浏览器上显示播放、暂停、静音等控件。您必须在 <audio> 标记中提供控件属性才能显示它。
<audio controls>
<source src="music.mp3" type="audio/mp3">
</audio>
输出
您可以看到音频文件的控件作为输出。
- 自动播放此属性用于在页面加载后或音频文件完全下载后立即自动播放音频。但最近，最新版本的 Google Chrome 已禁用此“自动播放”功能。您可以在 Mozilla、Microsoft Edge 和旧的 Google Chrome 上运行代码。下面是一个示例
<audio controls autoplay>
<source src="music.mp3" type="audio/mp3">
</audio>
输出
您看不到音频自动播放，因为它已在 Google Chrome 中被禁用。但是，如果您尝试在任何其他浏览器上运行此代码，您肯定会看到音频自动播放。
- 温和muted 属性用于在页面加载时将音频的声音静音。您可以在音量条旁边看到一个十字，表示音频已静音;单击该图标以听到声音。
例
<audio controls muted>
<source src="music.mp3" type="audio/mp3">
</audio>
输出
从输出中，您可以看到音频已禁用。这是因为 muted 属性。
- 圈
此属性用于循环播放音频。音频播放完毕后，音频将再次开始播放，直到结束。这将无限地持续下去。
例
<audio controls loop>
<source src="music.mp3" type="audio/mp3">
</audio>
输出
播放音频直到最后，您将看到音频重新开始。这是因为“loop”属性。
在 HTML 文档中添加音频文件的其他方法。
<audio> 标签并不是在浏览器中添加音频文件的唯一方法。还有 3 种方法可以做到这一点。让我们看看他们中的每一个——
- Object 元素object 元素是一个 HTML 标签，旨在允许我们在网页上包含各种媒体，例如音频、视频、照片和 PDF。它不经常使用，因为大多数浏览器都不支持它。它的执行方式取决于我们附加的媒体类型。
例
<object data="image.jpg" width="300" height="200"></object>
<object data="bridge.mp4" width="300" height="200"></object>
输出
如您所见，我们使用了对象标签来显示图像和视频文件，而不是 <img> 和 <video> 标签。
- 锚标记锚标记 <a> 用于创建指向网页的链接，单击该链接后，会将您重定向到该目标。鉴于锚标记只需要一个路径，如果我们提供音频文件的路径，它将重定向到音频。让我们看看下面的例子。
<a href="audio1.mp3">Audio 1</a>
<a href="audio2.mp3">Audio 2</a>
这段代码将创建两个链接 - 音频 1 和音频 2。如果您单击其中一个链接，它将打开一个新选项卡供您播放该特定音频文件。以下是输出 -
通常，这种方法并不可取，因为当用户想要在同一页面上查看内容时，锚标记会在您的网站上创建不必要的重定向。
- Embed 元素此标记的构建只有一个目标：允许您在 HTML 文档中嵌入多媒体资产。与对象标记一样，您可以在其中包含任何类型的文件。让我们看一下这个例子——
<embed src="image.jpg">
<embed src="video.mp4">
输出
这会将音频文件嵌入到您的网页中。文章来源：https://www.toymoban.com/news/detail-827862.html
浏览器支持
让我们看看浏览器对这两个标签的支持，以便我们可以更好地理解它们的标签。文章来源地址https://www.toymoban.com/news/detail-827862.html
<视频>标签 -
| Mozilla | Chrome | Opera | Safari | Edge | |
|---|---|---|---|---|---|
| .mp4 | YES | YES | YES | YES | YES |
| .ogg | YES | YES | YES | NO | YES |
| .webm | YES | YES | YES | YES | YES |
<audio> 标签 -
| Mozilla | Chrome | Opera | Safari | Edge | |
|---|---|---|---|---|---|
| .mp4 | YES | YES | YES | YES | YES |
| .ogg | YES | YES | YES | NO | YES |
| .wav | YES | YES | YES | YES | YES |
结论
- <video>标签用于在文档中嵌入视频内容，例如影片剪辑或其他视频流，其主要属性有：
- <audio> 标记用于在文档中嵌入声音内容，例如音乐或其他音频流。
- 您可以在 <video> 标记中使用的属性列表
- 宽度和高度
- 控制
- 海报
- 静音等
- 您可以在 <audio> 标记中使用的属性列表
- 来源
- 控制
- 自动播放
- 静音等
到了这里，关于Advance：HTML 中的视频标签和音频标签的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[前端笔记——多媒体与嵌入] 6.HTML 中的图片+视频+音频内容](https://imgs.yssmx.com/Uploads/2024/02/425174-1.png)
