HTML 媒体

由于我们知道将图像添加到 HTML 页面的细节，是时候学习如何使用其他 HTML 媒体类型了。本课程涵盖如何将视频和音频内容嵌入网页、为视频添加字幕/字幕、防止自动播放等的基本知识。

<video> 标签

我们使用 HTML<video>元素在网页上显示视频。与<img>标签一样，<video>标签要求src属性包含指向视频源的链接。它还包括设置视频框宽度和高度的属性。与<img> 标签不同，<video>元素需要开始和结束标签。

在开始和结束视频标签之间插入文本“不支持视频”。仅当您的浏览器无法加载视频时，才会显示此文本。

控件属性

自行播放而没有任何暂停或退出选项的视频是一场噩梦。更糟糕的是，它会引发癫痫发作、惊恐发作或偏头痛。为了避免这些最坏的情况，开发人员使用标签controls内的属性。<video>此属性允许用户通过提供播放、停止或暂停视频以及调整其音量的选项来控制视频播放器。

宽度和高度属性

width和属性分别定义视频的height垂直和水平尺寸。如果没有它们，页面可能会在视频加载时闪烁，至少会导致用户感到沮丧。请记住，默认情况下以像素为单位定义测量值，因此无需手动指定它们。

视频的 <source> 标签

有 2 种方法可以指定要嵌入的媒体的路径。最简单的是使用  标签src 内的属性 。<video>但是，有时您希望为多种文件格式提供替代来源，以提供与各种浏览器的兼容性。在这种情况下，请使用  标签<source> 内每种格式的元素 。<video>对于每个来源，您需要指定具有所需 src 属性的 URL。 

您还想添加该 type 属性以让浏览器知道嵌入的媒体类型（也称为 MIME 类型）。

对于视频内容，语法可以是：

视频/ogg

视频/mp4

视频/网络

自动播放属性

进入页面后，该autoplay属性会自动播放视频。它进入<video>以下标签width和height属性中。

虽然自动播放视频可以提高转化率，但它们对普通用户来说非常烦人，对残障人士来说也很危险。autoplay在添加属性之前请三思。此类媒体会引发癫痫发作和其他身体反应，使网站完全令人反感。

静音属性

如果在您的网页上自动播放广告是吸引用户注意力的必然方式，那么有一个健康的解决方案 -muted属性。与该autoplay属性一起，视频将开始播放，但缺少声音会使其不那么突兀。将muted属性放在autoplay属性之后。

HTML 支持的视频格式

最新的 HTML5 版本支持 3 种格式（MP4、WebM 和 Ogg）的视频显示，这些格式可以在现代浏览器中本地运行。不幸的是，它们都不能在所有浏览器中完美运行，因此您必须找到至少两个的组合才能获得有意义的 HTML5 视频支持。

<track> 标签

字幕或隐藏式字幕只会带来好处。它们允许用户在办公室、图书馆或公共交通工具等对声音敏感的环境中观看视频。此外，它们还增加了可访问性，为有听力障碍的用户提供视频内容。

那么我们如何为视频添加字幕呢？自闭合<track> 标签指定字幕、字幕文件或其他包含应伴随播放媒体的文本的文件。对于此标签，开发人员使用 WebVTT 格式的文件（.vtt 文件）。

<audio> 标签

就在几年前，添加音频文件还不是那么容易。在 HTML5 发布之前，没有标准来定义 Web 浏览器中的嵌入式媒体，例如音频。今天，您所要做的就是插入<audio> 元素并使用src属性指定文件源或使用元素指定多个文件源<source>。指定文件位置和音频属性后，请确保关闭<audio>标签并将其放在</audio>末尾。

<audio></audio>只有当浏览器在加载文件时出现问题时，才会出现“不支持音频”的短语。

控件属性

用户可能会在不同的情况下使用您的网站或产品，自动播放音频会极大地影响他们的印象和一般体验。播放音频和视频的选择应始终由用户驱动。确保包含该controls属性以允许用户随时管理音量、暂停和恢复播放。

音频的 <source> 标签

<source> 标签本身并不存在，并且始终是媒体标签的子标签<audio>。<video>它允许您添加一些文件源，以便浏览器可以选择<source>它支持的第一个。标签本身并未定义所有文件位置。相反，它包含src指定音频或视频的 URL 地址的属性。

与<video>元素一样，该type属性定义了浏览器支持的常见媒体类型。

对于嵌入音频文件，您应该使用以下语法：

• 音频/ogg

• 音频/mpeg

自动播放属性

想象一下，当您在公共交通工具、图书馆或医院时，进入一个带有背景音乐的页面。您可能会感到震惊，并且可能会头也不回地离开页面。如果您仍考虑添加该autoplay 属性，请确保用户可以控制媒体播放并将其关闭或暂停。

静音属性

与<video>元素一样，该muted 属性确保浏览器加载页面后音频是无声的。最终，该属性减轻了自动播放音乐的影响，并允许用户自行决定何时播放和收听音轨。

loop一旦视频或音频结束，该属性会自动重新启动媒体。

HTML 支持的音频格式

HTML 支持 3 种音频格式：MP3、WAV 和 OGG。但是，并非所有浏览器都能正确呈现每种媒体类型。例如，Safari 不会加载扩展名为 .ogg 的文件。在这种情况下，您应该有一个计划 B 并提供 MP3 或 WAV 文件。

嵌入 YouTube 视频

这是在您的网站上嵌入视频的最简单和最受欢迎的方法之一：

1. 将视频上传到 Youtube

2.复制HTML代码，点击分享按钮即可找到

3.<iframe>在你的网页中定义一个元素

src4 、在HTML文档的属性中插入代码

你都准备好了！与任何其他视频文件一样，您可以自定义 Youtube 视频并设置其宽度和高度。此外，您可以添加autoplay=1 和mute=1到 Youtube URL，让您的视频自动开始播放。

使用自动播放属性

autoplay一旦浏览器加载页面，该属性就会启动音频或视频文件。它遵循src 属性并且可以与muted属性串联。如果您决定使用autoplay，则必须包含控件以防止给用户带来不愉快的意外。

请记住，如果出现以下情况，许多浏览器会阻止自动播放媒体：

• 其音量未静音或静音为 0

• 用户尚未以任何方式与站点进行交互（通过单击、敲击或按键）

• 您的网站不在白名单上

有时，用户手动定义白名单，或者如果用户经常与媒体互动，浏览器会自动添加您的网站。

.mp3 音频格式

确保正确的媒体格式；否则，浏览器将根本不会呈现文件！如果是音频文件，HTML 接受 MP3、WAV 和 OGG。对于视频文件，大多数浏览器都支持 MP4、WebM 和 OGG。

添加 <track> 元素

使用<track>元素，您可以同时做 2 件好事。首先，即使在医院或图书馆等对声音敏感的环境中，字幕也允许用户访问视频内容。

其次，字幕有利于听力和认知障碍的用户，使他们可以按照自己的节奏阅读音频或视频文本。此外，字幕还可以描述声音效果（如咳嗽或敲门），帮助观众理解含义。

以上内容为转载