视频和音频

Mr.Hope ... 2019-09-02 HTML 大约 8 分钟

# 简介

HTML5 标准推出了 <video><audio> 标签,以及一些 JavaScript 和 APIs 用于对其进行控制。

# <video> 元素

<video> 允许你轻松地嵌入一段视频。

案例

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

案例属性解释:

  • src

    <img> 标签使用方式相同,src 属性指向你想要嵌入网页当中的视频资源,他们的使用方式完全相同。

  • controls

    用户必须能够控制视频和音频的回放功能。你可以使用 controls 来包含浏览器提供的控件界面,同时你也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。

  • <video> 标签内的内容

    此内容叫后备内容。当浏览器不支持 <video> 标签的时候,就会显示这段内容,这使得我们能够对旧的浏览器提供回退内容。你可以添加任何后备内容,在这个例子中我们提供了一个指向这个视频文件的链接,从而使用户至少可以访问到这个文件,而不会局限于浏览器的支持。

# 兼容性

如果你使用 Safari 或者 IE 来访问上面的链接,视频并不会播放,这是因为不同的浏览器对视频格式的支持不同。

所以<video> 标签的最佳实践是使用多个播放源以提高兼容性。

媒体文件的内容

像 MP3、MP4、WebM 这些术语叫做容器格式。他们定义了构成媒体文件的音频轨道和视频轨道的储存结构,其中还包含描述这个媒体文件的元数据,以及用于编码的编码译码器等等。

一个格式为 WebM 的电影包含视频轨道,音频轨道和文本轨道,其中视频轨道包含一个主视频轨道和一个可选的 Angle 轨道。

为了编解码器(codec)编码媒体,容器中的音频和视频轨道以适合的格式保存。音频轨道和视频轨道使用不同的格式。每个音频轨道都使用音频编解码器进行编码,而视频轨道则使用视频编解码器进行编码。如前所述,不同的浏览器支持不同的视频和音频格式,以及不同的容器格式(如 MP3、MP4 和 WebM,这些格式又可以包含不同类型的视频和音频)。

例如:

  • WebM 容器通常包括了 Opus 或 Vorbis 音频和 VP8/VP9 视频。这在所有的现代浏览器中都支持,除了他们的老版本。
  • MP4 容器通常包括 AAC 以及 MP3 音频和 H.264 视频。这在所有的现代浏览器中都支持,还有 Internet Explorer。
  • 老式的 Ogg 容器往往支持 Ogg Vorbis 音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome 当中支持,不过这个容器已经被更强大的 WebM 容器所取代。

有一些特殊情况。例如,对于某些类型的音频,通常编解码器的数据存储没有容器或简化容器。其中一个例子就是 FLAC 编解码器,它通常存储在 FLAC 文件中,FLAC 文件只是 FLAC 的原始轨迹。

另一种情况是一直流行的 MP3 文件。“MP3 文件”实际上是存储在 MPEG 或 MPEG-2 容器中的 MPEG-1 音频层 III(MPEG-1 Audio Layer III ,MP3)音频轨道。这一点特别有趣,因为尽管大多数浏览器不支持在 <video><audio> 元素中使用 MPEG 媒体,但由于 MP3 的流行,它们可能仍然支持 MP3。

音频播放器将会直接播放音频文件,例如 MP3 和 Ogg 文件。这些不需要容器。

不同的媒体格式主要用于将音频和视频压缩成可管理的文件(原始的音频和视频文件非常大)。浏览器包含了不同的 Codecs,,如 Vorbis 和 H.264,它们用来将已压缩的音频和视频转化成二进制数字。不同的编码器和不同的容器都有各自的优缺点,在你更了解它们后,你可以自己选择使用哪个编码器和容器。

浏览器并不全支持相同的 codecs,所以你得使用几个不同格式的文件来兼容不同的浏览器。如果你使用的格式都得不到浏览器的支持,那么媒体文件将不会播放。另外同一款浏览器,移动版可能比桌面版支持的格式可能会有不同。

<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>
1
2
3
4
5
6
7

你需要将 src 属性从 <video> 标签中移除,转而将它放在几个单独的标签 <source> 当中。浏览器将会检查 <source> 标签,并且播放第一个与其自身 codec 相匹配的媒体。

提示

你的视频应当包括 WebM 和 MP4 两种格式,这两种在目前已经足够支持大多数平台和浏览器。

每个 <source> 标签页含有一个 type 属性,这个属性是可选的,但是建议你添加上这个属性 — 它包含了视频文件的 MIME types ,同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性,浏览器会尝试加载每一个文件,直到找到一个能正确播放的格式,这样会消耗掉大量的时间和资源。

# 其他属性

这里有许多你可以用在 HTML5 <video> 上的特性。

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  poster="poster.png"
>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看
  </p>
</video>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • width 和 height

    你可以用属性控制视频的尺寸,也可以用 CSS 来控制视频尺寸。 无论使用哪种方式,视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比,那么视频边框将会拉伸,而未被视频内容填充的部分,将会显示默认的背景颜色。

  • autoplay

    这个属性会使音频和视频内容立即播放,即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上,因为用户们会比较反感自动播放的媒体文件。

  • loop

    这个属性可以让音频或者视频文件循环播放。同样不建议使用,除非有必要。

  • muted

    这个属性会导致媒体播放时,默认关闭声音。

  • poster

    这个属性指向了一个图像的 URL,这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

  • preload 这个属性被用来缓冲较大的文件,有 3 个值可选:

    • none: 不缓冲
    • auto: 页面加载后缓存媒体文件
    • metadata: 仅缓冲文件的元数据

# <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>
1
2
3
4
5

音频播放器所占用的空间比视频播放器要小,由于它没有视觉部件 — 你只需要显示出能控制音频播放的控件。一些与 HTML5 <video> 的差异如下:

  • <audio> 标签不支持 width/height 属性 — 由于其并没有视觉部件,也就没有可以设置 width/height 的内容。
  • 同时也不支持 poster 属性 — 同样,没有视觉部件。

除此之外,<audio> 标签支持所有 <video> 标签拥有的特性。

# 显示音轨文本

文本轨道会使你的网站更容易被搜索引擎抓取到 (SEO), 由于搜索引擎的文本抓取能力非常强大,使用文本轨道甚至可以让搜索引擎通过视频的内容直接链接。

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
2
3
4
5
6
7
8
9
10
11

有了 WebVTT 格式,你可以使用 <track> 标签。

让其与 HTML 媒体一起显示,你需要做如下工作:

  1. .vtt 后缀名保存文件。
  2. <track> 标签链接 .vtt 文件, <track> 标签需放在 <audio><video> 标签当中,同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是哪一种类型,如 subtitlescaptionsdescriptions。然后,使用 srclang 来告诉浏览器你是用什么语言来编写的 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>
1
2
3
4
5