HTML5 视频简介(转)

 

在线视频的发展简史

在 20 世纪 90 年代，如果在您的电脑上播放着邮票大小的 Apple QuickTime 或 Windows Media® 视频，看上去都很酷，更不用说是在线。QuickTime 1.0 作为一个技术突破在 1991 年发布，而 Microsoft 在 1992 年回敬一个 Video for Windows®。RealNetworks 在 1995 年发布 RealAudio Player；它是最早能在网络上播放流式音频的媒体播放器之一。在上世纪 90 年代末到本世纪初，客户在网络带宽方面的增强使得在线视频成为可能。所有的主流播放器都发布了能够播放流式和渐进式下载媒体的版本。2000 年时，在线视频成为现实 — 但还处于尚未标准化的混乱中。

常用缩略语

• API：应用程序接口
• CSS：层叠样式表
• GUI：图形用户界面
• HTML：超文本标记语言
• UI： 用户界面
• W3C：万维网联盟
• XHTML：可扩展超文本标记语言

早在 2000 年时，在线视频的质量时好时坏。RealNetworks 的 RealPlayer 似乎是最好的在线视频播放器，但是用户被升级所困扰，另外还被指控职业道德不良，保存用户私人信息。 QuickTime 比较好 — 至少在 Macintosh 系统上是这样，在 Windows 上，它受兼容性的影响，用户常常会猜想视频是否播放、他们是否能获得一个流畅的体验、是否音频可远程同步。

增强就此结束。Microsoft 赢得了 2001 年的浏览器大战，之后立即停止对 Windows Internet Explorer® 的改进，转而关注即将上市的功能方面的障碍可能会引起的安全漏洞。W3C 无济于事，它声明 HTML 规范已经 “过时”，转而关注 XHTML 和 XHTML2。开发人员转向 Adobe®（当时是 Macromedia）Flashnt® 的改进功能，诸如矢量动画、跨域通信、多文件上传、音频和视频等。

Flash 视频接任

在 2002 年，Macromedia 为了满足使用 Flash Video 开发人员的需求，引入了 Sorenson Spark。在 2003 年，该公司使用 VP6 编解码器（codec）引入了外部视频 FLV 格式，在当时，这是非常高质量的，并且是高压缩的。YouTube 在 2005 年发布专用 FLV 格式。Flash Player 有一个很大的安装库，Flash Video 几乎没有缺点，YouTube 有一个简单的界面用于上传视频和转换视频格式。结果是 Flash Video 成为了实际上的 web 标准。

过去解决方案的问题

除了 YouTube，实现在线视频麻烦并没有消除。在您的个人电脑或者公司网站放置一个 Flash 视频通常需要对 Adobe ActionScript® 和专有工具有一个很强的理解，用来编码视频和创建播放器控件。一个 Flash 对象的嵌入代码已存在很多年了，但是像清单 1 所示的代码，就算您研究很长时间，也不能让它简单多少。

清单 1. Flash 对象嵌入示例

<object id="UNIQUEID" height="520" width="528" codebase="http://download.macromedia.com/"
		classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" >
    <param value="../player/myVideoPlayer.swf" name="movie" />
    <param value="true" name="allowFullScreen" />
    <param value="all" name="allowNetworking" />
    <param value="always" name="allowScriptAccess" />
    <param value="opaque" name="wmode" />
    <param value="myVideoFile.flv" name="FlashVars" />
    <embed height="520" width="528" src="../player/mds_player.swf"
           id="UNIQUEID" wmode="opaque" allowscriptaccess="always" allownetworking="all"
		   allowfullscreen="true" swf="../player/myVideoPlayer.swf"
           flashvars="myVideoFile.flv"
           pluginspage="http://www.macromedia.com/go/getflashplayer"
		   type="application/x-shockwave-flash" quality="high" />
</object>

 

其他视频播放器的质量在不断发展，它们的使用不是很容易，因为很难知道视频是否能在用户电脑上播放。最常见的示例就是尝试播放一个 WMV 文件。如果浏览器是 Internet Explorer，WMV 可以播放。但如果是 Mozilla Firefox 呢？在 Windows 上也许 可以播放；在 Mac 上，可能不能 播放，但也有可能。结果是不同的浏览器视频格式需要运行在不同的浏览器和不同的操作系统上。不同的格式意味着不同的浏览器，对不同的浏览器的需要意味着一个复杂的 JavaScript 解决方案。

回页首

HTML5 视频简介

在 Tim Berners-Lee 看来，HTML 和 World Wide Web 是免费且开源的。Lee 创建 W3C 是为了实现“在适应新标准时确保行业成员之间的兼容性和一致性”。但是到 2000 年，W3C 开始忙于 XHTML，而开发人员分别转向专有 Flash 插件。

在 2007 年，Opera 在 Web Hypertext Application Technology Working Group (WHATWG) 工作草案中提议使用 <video> 标记，其目的是 “将视频制作成一个的网络组件，以一个轻松、开放的解决方案来将视频整合到网页、且在浏览器上本地支持视频”。清单 2 展示了这一提议，比起插件所需的冗长的对象嵌入标记，它更优雅更易于操作。

清单 2. 简单的 HTML5 视频示例

<video controls src="demo.ogg"></video>

 

在 2009 年 7 月，W3C 声明终止对 XHTML 的支持，开始使用 HTML5。今天，所有现代浏览器（包括 Windows Internet Explorer 9）都支持 <video> 标记，并且 API 基本一致（尽管有些细节仍在不断变化）。

HTML5 视频有很多优势。无需 JavaScript 或 ActionScript 代码，因为您只需要包括 <video> 标记和参数，如 清单 2 所示。它是一个的浏览器元素，不是一个插件。这意味着如果您使用 JavaScript 代码，页面完全载入后视频就准备好了，您不需要等待插件加载。虽然会有例外，但 API 都是标准化的，可以跨所有浏览器运行。由于它是一个本地元素，因此不可能与插件起冲突 — 就是说不影响显示，比如视频不会干扰滚动条。

HTML5 视频问题

HTML5 视频规范仍然不够成熟，因此还有一些问题。最显著的就是在 Internet Explorer 中不支持，尽管第 9 版预览版中已经支持。本地 UI 控件很方便，但是外观和功能在各浏览器之间是不一致的。为第三方视频建立沙盒比较困难，至少需要内联框架。此外，规范缺乏功能强大的全屏幕功能，在 Flash 中这一功能被认为是理所当然的；最近，Mozilla 提交了一个方案来解决这一问题。

Flash 在其他领域仍然处于领先地位，比如流媒体、处理不同带宽的功能、视频采集和内容保护。重要的是使用 Flash，就可以在所有操作系统上跨浏览器播放一个视频文件。浏览器供应商尚未同意单独使用 HTML5 视频格式，因此，目前您至少 需要两个视频文件。

高级的 HTML5 视频

为解决不同浏览器供应商之间缺乏一致性的问题，该规范进行了修改，以处理不同类型的视频（见 清单 3）。

清单 3. HTML5 视频有多个源 

<video controls>
	<source src="demo.ogg" />
	<source src="demo.webm" />
	<source src="demo.mp4" />
</video>

 

浏览器可能尝试依次播放每个源文件，因此，如果不能播放一个 Ogg 视频，将尝试 WebM 视频，然后是 MP4 视频。如果浏览器不能播放任何 格式，将提供一个没有文件被载入的视觉线索。实际上，视频元素是向后兼容的，因为如果浏览器不能识别，那么将会忽略它。您可以通过插入一个较熟悉的元素（如 清单 4 所示）使之成为您的亮点。

清单 4. HTML5 视频含有故障图像

<video controls>
	<source src="demo.ogg" />
	<source src="demo.webm" />
	<source src="demo.mp4" />
    <img src="images/videoReplacement.gif" />
</video>

 

其他解决方案需要插入一个 Flash 嵌入对象，而不是一个图像。

回页首

HTML5 视频 API

HTML5 视频的 API 十分简单 — 但是，再次强调，目前它还不成熟不稳定。记住，HTML5 规范不是 W3C 推动的，而是浏览器开发商。尽管这个过程推动创新，正是因为这一点，每个浏览器都有其他浏览器所没有的、独一无二的功能。此外，表 1 中的 API 在支持的浏览器上基本一致。

表 1. HTML5 视频 API

特性（Attributes） 属性（Properties） 方法 事件

src  width height type poster autoplay loop controls preload	currentSrc currentTime videoWidth videoHeight duration ended error paused muted seeking volume paused muted	play pause load canPlayType	play pause progress error timeupdate ended abort empty emptied waiting loadedmetadata

特性（attributes） 和属性（properties） 的区别是，您不可以在标记中使用属性，而可以在标记和脚本中使用特性。<video> 元素的src 特性会覆盖源元素的 src 特性。如果您在标记中使用源元素，src 将是一个空字符串，唯一立即可用的是 width 和 height，用于设置容器的大小。其他所有的事件在视频的元数据加载之后方可使用。

API bug

浏览器没有致命的 bug，但是 Apple iPad 有一些 bug 会影响当前 API：

• 动态视频 bug。如果您使用 innerHTML 创建 <video> 元素，源元素不能自动触发。解决方法是设置 src 特性并调用 load 方法。见 清单 5 示例。
• 源次序 bug。如果第一个元素是一个非 MP4 视频的，iPad 将停下来不加载。解决方法是总是将 MP4 源元素列在最前面。
• 粘贴 bug。iPad 不能显示粘贴图像，这个 bug 不久将被修复，但是目前，解决方法是创建一个 HTML IMG 元素，置于适当位置。

清单 5. 修复 iPad 动态加载 bug

window.onload = function(){
	var video = document.body.appendChild(document.createElement('video'));
	if(video.canPlayType("video/ogg")){
		video.src = "video/myMovie.ogv";
	}else if("video/mp4"){
		video.src = "video/myMovie.mp4";
	}
	video.load();
}

 

回页首

视频文件术语

要准备视频开发，您需要明白术语的含义、MP4 和 Ogg 的不同，当然还有如何编码视频。讨论视频时两个最主要的术语是文件格式和编解码器。

文件格式 也被称为包装器 或容器。MP4、WebM 和 OGV 都是文件格式。元数据文件格式说明数据如何被存储、以及如何为您计算机提供信息，使计算机下载所需库来显示文件。文件格式通常包括一个视频和一个音频编解码器，以及一个操作指南，向计算机说明如何进行。

编解码器 是一些代码，用来处理图像、音频或者其他数据编码格式，它通常包括压缩编码数据流程。以下是 HTML5 视频实现文件格式及其各自的编解码器：

• MP4，使用 H264 视频、AAC 音频
• WebM，使用 VP8 视频、Vorbis 音频
• Ogg，使用 Theora 视频和 Vorbis 音频

回页首

HTML5 视频文件格式

目前，HTML5 视频支持的格式是 MP4、Ogg 和 WebM ；记住，跟踪这些很难，因为每个浏览器支持的格式都不相同。

浏览器

表 2 展示了每个浏览器支持的文件格式。

表 2. 浏览器兼容性一览表

浏览器 MP4 Ogg WebM

Internet Explorer 9	YES	NO	MAYBE
Firefox 4.0	NO	YES	YES
Google Chrome 6	YES	YES	YES
Apple Safari 5	YES	NO	NO
Opera 10.6	NO	YES	YES

注意：Mac 上的 Safari 和 Windows 上的 Internet Explorer 9，将支持任何编解码器已经安装在操作系统上的类型。其他浏览器（Firefox、Opera、Chrome）需要具体实现所有视频的编解码器。

智能手机

智能手机编解码器实现通常是在硬件中；Apple、iPhone、iPad 和 Android 所有这些手机都只支持它们带有的编解码器，就是 MP4。RIM Blackberry 使用 3GP 视频文件格式，也可以使用 H264 编解码器。

回页首

编码软件

H264 编解码器被广泛采用，因此您所使用的大多数编码软件都可以编码一个 MP4 视频。WebM 是新兴的，但是工具都已经可以使用。尽管 Ogg 是开源的，但是还没有广泛使用，因此只有少数几个工具可供其使用。更多信息和技术见 参考资料 部分。

视频编码术语

编码一个视频时，您通常会遇到很多令人费解的术语。尽管可以根据经验推测并输出一些内容，但是下述内容有助于您更好地理解这些术语。其结果是，您可以创建高质量的视频，而只占用较少带宽，以及渐进式下载，而非流式下载，如果视频不能在所有设备上播放还可以进行故障检测。

• 可变比特率（VBR）和恒定比特率（CBR）。VBR 根据当前图像的复杂程度调整比特率；相反，CBR 不考虑图像的复杂度，在整个视频中使用同一比特率，是典型的流媒体技术。
• 多步骤。这一术语用来描述编码时采用两个过程。第一步是分析数据，便于第二步进行最小化压缩，这一功能不用于流媒体。
• 方形/矩形像素。这在早期视频转换软件中是不能实现的。从本质上说，使用非方形像素解析 720x480，使用方形像素解析 640x480。如果使用不正确的转换，图像将会被拉伸。
• 级别。这是一个 H264 设置。级别（通常有 16 个）本质上是快捷键，用于在压缩时限制不同的视频组件。
• 配置文件。配置文件是 MP4 编码中的功能集。最常用的是基线。用于 web、视频会议和移动应用程序；main 用于标准定义的数字电视广播或者高分辨率的网络广播；high 是用于广播和磁盘存储应用程序，特别是 Blu-ray。

回页首

许可

MP4 容器、H264 视频编解码器以及 ACC 音频编解码器都是 MPEG LA Group 专利的专有格式。对于个人网站或者仅有少量视频的公司，这不是问题。然而对于那些有大量视频的公司要非常注意许可证和费用，因为这可能会影响他们盈亏的底线。MP4 容器以及其编解码器对终端用户通常是免费的。

WebM 和 Ogg 容器，VP8 和 Theora 视频编解码器、以及 Vorbis 音频编解码器都是在 Berkeley Software Distribution License 授权的、免版费和开放源码的。视频可以无成本制作、分发和观看。然而，传言 VP8 可能侵害一些 H264 专利，故总是保持最新更新。

回页首

建议

MP4 是一个行业标准文件格式，但这并不能保证将会维持下去。我们有理由选择其他格式：

Ogg Theora：

• 优点
  • 无成本
  • 在 Linux® 上运行
• 缺点：
  • 未广泛使用
  • 没有硬件加速
• 使用场景：
  • 仅维护少量文件
  • 小型网站或个人网站
  • 兼容性不成问题
  • 开放源码狂热者

WebM:

• 优点：
  • 无成本
  • 接受度快速增长
  • 不久可使用 Flash 观看
  • 硬件加速支持构建
  • 依靠 Google/YouTube
• 缺点：
  • MPEG LA 的专利诉讼迫在眉睫
  • 在 iPhone 和 iPad 上不支持
• 使用场景：
  • 适合于有很多文件的网站
  • 兼容性与财务底线没有必然联系
  • 不担心 Apple 产品的兼容性
  • 未来成功有风险

MP4：

• 优点：
  • 发展良好的行业标准
  • 最小的文件和最清晰的图像
  • 广泛支持硬件加速
• 缺点：
  • 必须要有硬件加速，因为其解码太耗处理器
  • 许可费日益逼近
  • WebM 可能取得成功
• 使用场景：
  • 最适合全面兼容和屏幕的适应性
  • 如果包含一个 Flash 播放器，在所有浏览器和新移动平台上可播放
  • 如果只需要一个视频版本，这是最好的解决方案

回页首

结束语

本文展示数字视频的进展 — 从 Internet 早期到目前。人们期待有一种格式随处可用，但目前还不能实现。视频编解码器使用非常先进的技术，这些技术都是经过多年编写而成的，而 web 的发展周期就相对年轻了很多。一旦某种视频格式成为主流，就意味着其他格式面临着挑战。幸运的是，根据本文所述的规则，事先再做些准备，决定使用哪个视频格式并不是很困难。