首页 HTML5 Dive Into HTML5:Web 视频

Dive Into HTML5:Web 视频

0 1.7K

如果你访问过 YouTube.com (或者是国内的 youku.com),你就会知道,我们早就可以在 web 页面嵌入视频。但是,在 HTML5 之前,这些都不是标准的。在此之前,你在网页上看到的所有视频都是基于某一种第三方插件的——QuickTime、RealPlayer 或者 Flash(顺便提一下,YouTube 使用的是 Flash)。这些插件已经很好的集成在你的浏览器中,甚至你都看不出正在使用它们,直到你发现一个现有插件不支持的视频。

HTML5 定义了一种在网页嵌入视频的标准做法,使用<video>标签。<video>标签依然在修订中,不过已经差不多完成。下表就是目前浏览器的支持程度:

IEFirefoxSafariChromeOperaiPhoneAndroid
9.0+3.5+3.0+3.0+10.5+1.0+2.0+

不过对于<video>标签自身仅仅是一个短短的故事。在我们详细了解 HTML5 视频之前,我们先来了解一下所谓的“视频”(如果你已经很了解视频,那么就可以跳过这一段了)。

视频容器

或许你认为视频文件就是“AVI文件”或“MP4文件”。事实上,“AVI”和“MP4”只不过是容器格式。就像ZIP文件可以包含很多文件一样,视频容器格式仅仅用于定义存储视频的东西,而不是视频自己的数据。(实际情况要比这复杂一些,因为不是所有的视频流都能使用任何容器格式进行存储,但现在先不要担心这个问题。)

一个视频文件通常包含多个轨道——一个视频轨(不含声音),再加上一个或多个音频轨(不含视频)。轨道通常是相关的。一个音频轨包含有各种标记,用于帮助音视频的同步。相互独立的轨道可以包含元数据,例如视频轨的长宽比、音频轨的语言等。容器也可以包含元数据,例如视频本身的标题、唱片封面、电视节目的集数等等。

现在有很多种视频容器格式,其中最流行的几种是:

  • MPEG 4,通常是 .mp4 或者 .m4v 作为后缀名。MPEG 4 容器基于 Apple 的较老版本的 QuickTime 容器(.mov)。Apple 网站上的电影片段依然使用的是较老的 QuickTime 容器,但是你从 iTunes 中获得的视频都已经是 MPEG 4 的了。
  • Flash 视频,通常是 .flv 后缀名。不用说,Flash 视频当然由 Adobe Flash 使用。早于 Flash 9.0.60.184 (例如 Flash Player 9 Update 3)的时候,它是 Flash 唯一支持的视频容器格式。不过现在新版本的 Flash 已经支持 MPEG 4 了。
  • Ogg,通常是 .ogv 作为后缀名。Ogg 是一个开放的开源标准,友好,不被任何组织支配。Firefox 3.5,Chrome 4 和 Opera 10.5 都支持直接这个格式,包括 Ogg 视频(称为 “Theora”)和 Ogg 音频(称为“Vorbis”),不需要平台相关的插件。桌面应用中,Ogg 被所有主流 Linux 发行版直接支持,你也可以在 Mac 和 Windows 上使用 QuickTime 或者 DirectShow 来观看。它也能够使用优秀的 VLC 在所有平台播放。
  • WebM 是一个新型的容器格式。它与另外一种叫做 Matroska 的格式很类似。WebM 在 2010年5月发布。它被设计为独占式使用 VP8 视频解码器和 Vorbis 音频解码器。(我们将在后面的内容详细解释这个问题)它现在已经在最新版本的 Chromium、Google Chrome、Mozilla Firefox 和 Opera 中直接支持,无需使用插件。Adobe 也宣布未来版本的 Flash 将支持 WebM 视频。
  • Audio Video Interleave,通常以 .avi 为后缀。AVI 容器格式由微软在很早时候发明,当时用计算机播放视频还是一件很新奇的事情。很多现代容器格式所支持的特性,比如元数据,它都不是官方支持的。现在,很多音视频解码器都不将它作为官方支持的格式。很多公司都试图以不兼容的方式扩展它。至今,它依然是某些流行编码器,如 MEncoder 的默认容器格式。

视频编码

当我们说“观看视频”的时候,实际我们指的是一种一个视频流和一个音频流的混合。但是你并没有两个文件,仅仅有一个“视频”。它可能是一个 AVI 文件,或者是 MP4 文件。这些都只是容器格式,就像 ZIP 中也可以包含很多类型的文件。容器格式定义了如何在一个文件中存储视频和音频流。

当你“看视频”的时候,视频播放器至少干了三件事:

  1. 解析容器格式,找出其中的可用的视频轨和音频轨,以及它们是如何存储在这个文件中的,这样,就可以找出解码所需要的数据;
  2. 对视频流进行解码,在屏幕上播放一连串的画面;
  3. 对音频流进行解码,向音箱发送声音。

视频编解码器是针对一个视频流如何进行编码的算法,它指定如何进行上面所说的第二步。(编解码器实际包含了两种意思:“编码”和“解码”。)视频播放器根据视频编解码器对视频流进行解码,然后显示一系列图像,或者称为“帧”。许多现代的视频编解码器使用各种技巧,尽量减少显示下一画面时所需要的信息。例如,我们不会将每一个独立的帧都存储起来(就像截屏一样),而只是存储每帧之间的区别。大部分视频并不会每一帧都会有很大的改变,所以这种做法的好处就是提供很高的压缩率,从而大大减小了文件尺寸。

视频编解码器分为有损和无损两种。无损视频因为太大而不能在 web 上使用,所以我们这里仅仅介绍有损的编解码器。有损意味着在编码的过程中,有些信息是要丢弃的。就像使用录音机复制磁带,你总要和原始版本的磁带有些差别,主要就是丢失一些信息,从而降低了质量。录音带音质降低的主要表现就是有“嘶嘶”的声音,而重复编码多次的视频则会在画面之间有些顿卡,特别是动作比较大的场面。(事实上,这种情况在你仅仅从原始资料编码一次的时候就可能发生,如果你选择一个很差的视频编解码器,或者是设置的参数是错误的。)有损编码好的一面是,它可以通过平滑播放时的明暗,实现一个令人吃惊的压缩率,并且这种平滑人眼很难识别出来。

视频编解码器有很多种,目前用的最多的几种是H.264、Theora和VP8。

H.264

H.264 也称为“MPEG-4 part 10”,或者是“MPEG-4 AVC”,或者“MPEG-4 Advanced Video Coding”。H.264 由 MPEG 小组创建,并且在2003年成为标准。它的目标在于为各种设备,低带宽、低CPU设备(手机),高带宽、高CPU设备(现代桌面电脑)以及任何介于二者之间的设备提供一个单一的编解码器。为达到这一目的,H.264 标准细分为几个“配置”,每一个配置定义了对应于某一特定环境的一个特性集合。较高的配置提供更多特性,以更低的文件尺寸提供更好的视频质量,也就意味着更长的解码时间,解码实时占用CPU也更多。

让我们用实际例子来看看究竟什么是“配置”。Apple 的 iPhone 支持 Baseline 配置;AppleTV 机顶盒支持 Baseline 和 Main 配置;桌面 PC 的 Adobe Flash 则支持 Baseline、Main 和 High 配置。YouTube 现在使用 H.264 编码高清视频,使用 Adobe Flash 播放;YouTube 还为移动设备提供 H.264 编码的视频,包括 Apple 的 iPhone 和运行着 Google Android 移动操作系统的各种手机。同时,H.264 还是蓝光标准的视频编解码器之一;蓝光关盘则是使用它的 High 配置。

大部分非 PC 设备在播放 H.264 视频时都是用一条单独的芯片进行解码(包括 iPhone 和标准的蓝光播放器)。因为它们的主 CPU 都没有足够的能力实时解码。目前,甚至低端的桌面显卡都能支持 H.264 的硬解码。H.264 的解码器有很多,包括开源的 x264 库。H.264 标准是有专利保护的,这个许可由 MPEG LA 小组通过。H.264 视频可以被嵌入到大部分流行的容器格式中,包括 MP4(主要是 Apple 的 iTunes Store 在使用)和 MKV(主要是非商业的视频爱好者使用)。

Theora

Theora 由 VP3 编解码器发展而来,现在由 Xiph.org 基金会开发。Theora 是一个免版税的编解码器,不由任何已知的专利担保,除了最初的 VP3 专利,而这个专利就是免版税的。虽然 2004 年,这个标准就已经完成了,但是 Theora 项目(包含开源的编码器和解码器的实现)直到2008年11月才发布1.0版本,2009年9月发布1.1版。

Theora 视频可以被嵌入到任何容器格式,不过一般是在 Ogg 容器。所有主流 Linux 发行版都直接支持 Theora 播放。Mozilla Firefox 3.5 也原生支持播放 Ogg 容器中的 Theora 视频。这里的“原生”,意思是“在任何平台上都可以使用,不依赖于平台相关的插件”。你也可以在 Windows 或者 Mac OS X 播放 Theora 视频,不过需要实现安装 Xiph.org 的开源解码器。

VP8

VP8 是来自 On2 的另一个视频编解码器。这个公司也就是 VP3(后来的 Theora)的开发公司。从技术上说,它的输出同 H.264 High Profile 相当,但是其解码难度才相当于 H.264 Baseline。

2010年,Google 收购了 On2,发布了其视频编解码器标准,并将一个简单的编码器和解码器进行了开源。作为这个的一部分,Google 也开放了 On2 关于 VP8 的所有专利,将它们作为免版税的。(这是你所能期望的关于专利的最好做法。你不能实际的“发布”专利或者在软件有了重大变化时废弃专利。为了能够对开源软件友好,你可以将专利声明为免版税的,这么一来,任何使用这项技术的个人或组织都可以使用这个专利技术,无需任何费用或违反专利条约。)2010年5月19日,VP8 称为一个免版税的现代编解码器,不再受任何专利担保,除了 On2(现在是 Google)的这个免版税专利。

发表评论

关于我

devbean

devbean

豆子,生于山东,定居南京。毕业于山东大学软件工程专业。软件工程师,主要关注于 Qt、Angular 等界面技术。

主题 Salodad 由 PenciDesign 提供 | 静态文件存储由又拍云存储提供 | 苏ICP备13027999号-2