前端学习回顾-12

视频和音频内容

使用 <video> 以及 <audio> 元素为 HTML 文档添加视频和音频播放器。

注：JavaScript 和 APIs 可以控制视频和音频播放，此文暂且不表。

video 元素

<video> 元素可以为 HTML 文档嵌入一段视频。代码示例：

    <video src="https://media.w3.org/2010/05/sintel/trailer.mp4" controls>
      <p>
        你的浏览器不支持 HTML5 视频。可点击<a
          href="https://media.w3.org/2010/05/sintel/trailer.mp4"
          >此链接</a
        >观看
      </p>
    </video>

代码内容解释如下：

• src 属性（读作：source）：同 <img> 元素中 src 属性的使用方式相同，src 属性值指向待嵌入网页当中的视频资源。
• controls 布尔属性：controls 属性使浏览器提供控件界面，必须给用户提供视频播放控制功能。亦可以使用 JavaScript API 构建自定义空间界面，该界面必须包括启动和停止媒体的方法，以及调节音量的方法。
• video 元素内容：称之为后备内容，当浏览器不支持 <video> 元素时，则页面会显示该内容。后备内容可供自定义，该例中提供一个指向该视频文件的链接，从而使用户至少可以访问到这个文件，而不局限于浏览器的支持。

video 属性

<video> 元素的相关属性介绍，代码如下：

   <video
      src="https://media.w3.org/2010/05/sintel/trailer.mp4"
      controls
      width="400"
      height="400"
      loop
      muted
      autoplay
      poster="images/dinosaur.jpg"
    >
      <p>
        你的浏览器不支持 HTML5 视频。可点击<a
          href="https://media.w3.org/2010/05/sintel/trailer.mp4"
          >此链接</a
        >观看
      </p>
    </video>

属性介绍：

• width 和 height：使用此两者属性控制视频的尺寸，亦可以使用 CSS 控制视频尺寸。无论使用那种属性，视频都会保持它原始的长宽比（亦称作纵横比），如果自定义的尺寸没有使视频保持原始长宽比，那么视频边框将会被拉伸，视频播放时，未被视频内容填充的部分，将会显示默认的背景颜色。
• autoplay：设置此属性后，页面打开时会使视频内容立即播放，即使页面的其他部分没有加载完毕。由于用户们比较反感自动播放的媒体文件，因此不建议在网站上使用该属性。
• loop：设置此属性后，会使视频循环播放，非必要情况下，不建议使用。
• muted：设置该属性后，视频播放时，默认关闭声音。
• poster：该属性含有一个图片的 URL，该图片会在视频播放前显示，通常用于视频预览或者广告。
• preload：该属性设置后会对文件进行缓冲，3 值可选：
  - ”none"：不缓冲
  - ”auto“：页面加载后缓存媒体文件
  - ”metadata“：仅缓冲文件的元数据

使用多个播放源以提高兼容性

由于不同的浏览器对视频格式的支持不同。比如，相容的视频链接，在 chrome 浏览器可以正常播放，但是其他浏览器会播放失败。当然，有办法防止该问题出现。

媒体文件的内容

媒体文件相关知识

• 类似 MP3、MP4、WebM等称为容器格式。它们定义了构成媒体文件的音频轨道和视频轨道的存储结构，其中还包括描述该媒体文件的元数据，以及用于编码的编译译码器等。
• 为方便编解码器（codec）编码媒体，容器中的音频和视频轨道将以合适的格式保存。音频轨道和视频轨道使用不同的格式，音频轨道使用音频编解码器进行编码，视频轨道使用视频编解码器进行编码。
• 不同的浏览器支持不同的视频和音频格式，以及不同的容器格式（如MP3、MP4和WebM，这些格式又可以包含不同类型的视频和音频。）

综上所述，为使嵌入在页面中的媒体文件可以正常播放，代码层面可以采用以下方法：

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

将 src 属性从 <video> 元素中移至其子元素 <source> 元素中。（<video> 元素可以包含多个 <source> 元素。）视频待播放时，浏览器会检查 <source> 元素，播放第一个与其自身 codec 相匹配的媒体。（视频格式建议采用 Web 以及 MP4 格式，此两种格式已足够支持大多数平台和浏览器。）

建议如上述代码所示，采用 <source> 元素的可选属性 type 属性，并且属性值与 src 指向的媒体文件格式一致。这样浏览器会通过检查该属性而迅速跳过不支持的格式。如果没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个可以正确播放的格式，但这样会消耗掉大量的时间和资源。

显示音轨文本

在以下情况下，人们可能不想（或不能）听到 Web 页面的音频/视频内容：

• 听觉障碍患者
• 嘈杂环境中
• 不想打扰他人
• 听不懂音频所用语言，需要副本或是翻译协助

HTML5 的 <video> 和 <aduio> 元素使之成为可能，使用 <track> 元素，配合 WebVTT 格式。

WebVTT 是用于编写文本文件的一种格式，该文本文件包含了众多字符串，这些字符串中会带有一些元数据，这些元数据用于描述该字符串在视频中的显示时间，甚至描述这些字符串的样式以及定位信息。这些文本字符串称为 cues。常见格式如下：

• subtitles：通过添加翻译字幕，帮助听不懂视频文件语言的用户理解音频中的内容。
• captions：同步翻译对白，或是描述一些重要信息的文字，帮助不能听到音频的用户理解音频内容。
• timed descriptions：将文字转换为音频，服务于视觉障碍用户。

一个典型的 WebVTT 文件内容如下：

WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

  ...

使用方式：

1. 以 .vtt 后缀名保存文件。
2. 使用 <track> 元素的 src 属性指向该 .vtt 文件，该元素需要包含在 <audio> 或 <video> 元素中，同时需要声明在所有 <source> 元素之后。使用 kind 属性指明文件类型（subtitles、captions、descriptions），使用 sclang 属性告知浏览器 subtitles 使用什么语言编写。

示例代码如下：

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

audio 元素

<audio> 元素的使用方法与 <video> 元素使用方法相似，只有一点不同，具体使用方法如下：

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

<audio> 元素与 <video> 元素的异同：

• <aduio> 元素不支持 width/height 属性，因其没有视觉部件。
• <aduio> 元素不支持 poster 属性，亦因其没有视觉部件。
• 除上述提到的属性，<aduio> 元素支持的属性与 <video> 元素相同。