第11章 多媒体
说到浏览器对多媒体的支持，不得不提的就是Flash插件和HTML5之争。Flash对Web的发展起了非常重要的作用，它能够支持视频、音频、动画等多媒体功能，虽然现在大家都在讨论Web前端领域是否应该丢弃Flash插件转而支持HTML5。在本章中，笔者将回顾Web前端中的多媒体发展历程，然后详解现在HTML5中引入的多媒体技术。从整体上来看，这的确是一幅欣欣向荣的景象：从没有原生支持和仅是第三方插件支持，到简单的音视频播放，从音频播放再到使用WebAudio技术来处理音频，最后再到网络实时视频会议，Web被引入了极其强大的能力，前所未有。我们有理由相信，这绝对不是终点。
1 HTML5的多媒体支持
在HTML5规范出来之前，网页对视频和音频播放的支持基本上都是依靠（Flash）插件来实现，因为HTML语言及相关规范并没有定义视频和音频方面的功能。在HTML5之后，这种情况发生了很大的变化，同文字和图片一样，音频和视频直接成为HTML一系列规范中第一等公民，千万不要小看第一等公民的地位，这不仅仅说明了网页中可以直接支持多媒体的播放，而且还有很多额外的优点。
首先是JavaScript接口的支持，开发者可以使用JavaScript接口来方便地控制音视频的播放，实现例如播放、停止和记录等功能。
其次是HTML5支持音视频的真正强大之处------多媒体（如视频）与图片一样可以用其他技术来进行操作，例如使用CSS技术来修改它的样式（如3D变形）。Web开发者可以将视频同Canvas2D或者WebGL结合在一起，而之前Flash插件中的视频是不能（或者轻易）做到的。回顾第二章的示例代码2-2中，"video"元素同"canvas"元素一样被设置了3D变形属性，图2-4就是它的显示结果。
如果读者觉得HTML5只是提供了音频和视频的播放功能，那就显然低估了它的能力，在HTML5中，对于多媒体的支持大概包括以下几个部分。
第一个是HTML的元素"video"，它用于视频（当然也包括音频）的播放。第二个是HTML元素"audio"，它用于单纯的音频播放。第三个是可以将多个声音合成处理的WebAudio技术。第四个则是将照相机、麦克风功能与视频、音频和通信结合起来使用的最新技术WebRTC（网络实时通信），这一HTML5对于多媒体领域的重大支持，使得Web领域使用视频对话和视频网络会议成为了现实。
目前各个浏览器对于HTML5中多媒体的支持正在得到逐步地增强，尤其是对HTML5的"video"和"audio"元素的支持，这一趋势在移动操作系统上体现得更为明显。因为很多移动浏览器其实不支持Flash插件，这直接导致众多视频内容提供商需要将视频和音频改为采用HTML5标准的格式才能正常提供内容。对于WebRTC技术，基于对规范的支持目前走在前面的是Chrome和Firefox浏览器，笔者已经成功使用了Chrome和Firefox来进行网络视频对话，这的确是一项不可思议的新技术。一个完整的多媒体解决方案，通常需要WebKit和Chromium两个项目共同努力，一起解决相关问题，从总体上看，其大致有四个部分。
第一部分当然是WebKit的基础部分，包括对规范的支持，这其中有DOM树、RenderObject树和RenderLayer树等对多媒体方面的支持。
第二部分是Chromium的桥接部分，也就是将WebKit的接口桥接到Chromium项目中来，包括接口的桥接、渲染方面的桥接等。
第三部分是依赖其他多媒体库，包括ffmpeg、libjingle等第三方项目，使用它们来做多媒体方面的处理。
第四部分是Chromium对多媒体资源获取和使用多媒体库来帮助解码等管线化过程的具体实现。Chromium重新实现了整个媒体播放流程，并针对桌面系统和移动系统采用了一些特殊的技术和解决方法。
下面依次来看HTML5规范定义的多媒体技术，以及WebKit和Chromium为HTML5多媒体方面的技术做了哪些支持工作，也就是上面这些部分如何运作的。