本节书摘来自异步社区《HTML5多媒体应用开发》一书中的第2章，第2.1节,作者： 【爱】Ian Devlin 更多章节内容可以访问云栖社区“异步社区”公众号查看。
现在你已经掌握了HTML5的简史及其结构化元素，下面可以开始学习有关HTML5多媒体、多媒体元素和属性的知识，以及它们所带来的组合功能了。
HTML4.01没有定义为网站带来音频和视频的方法，这导致了交付多媒体内容的第三方插件（如Flash）的盛行。但是HTML5提供了这种必要的结构，通过Web浏览器在互联网上传递音频和视频。
本章提供浏览器中多媒体的历史，以及通过各个供应商发行的许多应用程序、播放器和插件回访音频和视频的实现方法。然后，你将学习一些HTML5新元素，它们能让你利用浏览器原生多媒体。
20世纪90年代初浏览器和Web的概念刚刚出现的时候，没有任何多媒体。很快，图像开始加入，但是充其量是穷人的多媒体。虽然随着GIF动画的出现，这些图像可以成为动画，但是这些动画完全是非交互性的。即使在音频和视频文件出现时，互联网技术在Web上传递这些文件的能力也很有限。互联网连接很慢，而音频和视频文件很大，没有人希望等待大文件的下载。文件下载之后，也必须使用独立于Web浏览器的外部播放器来查看内容，这在当时很正常，很少有人为此抱怨。
互联网连接速度的飞速提高带来了更快地在Web上发送多媒体的能力，Web浏览器技术也同样快速进步，自然地推出了现在称之为原生多媒体的技术。
在你深入研究原生多媒体之前，我们先简略地来看一看曾经被用来回放音频和视频文件（现在仍然作为桌面播放器）的外部播放器。
2.1.1 媒体播放器媒体播放器是用于描述具有回放多媒体文件（如音频和视频）能力的一种软件的标准术语，这种软件通常有图形用户界面。
20世纪90年代中期，MIDI（乐器数码接口）文件格式被用来在Web文档上播放背景音乐，这种音乐通常自动播放。尽管MIDI音乐很令人讨厌，但是毕竟是多媒体在浏览器上的开端。接着不同的供应商开发出了许多其他播放器，遍布于你的电脑上。
RealNetworks于1995年发布了其音频播放器——RealAudio，第一次推出了使用专利的.ra和.ram音频文件通过Web播放音频的概念。RealAudio的进一步发展导致了1997年RealVideo的发布，它能使用基于H.263视频格式的视频流。这两种播放器最后合并为RealPlayer，并被包含在Windows 98中作为可选工具。RealPlayer在今天仍然存在（最新的稳定版本为第14版）于许多平台之上，它能够播放多种音频和视频文件格式。
1995年Macromedia发布了第一个Shockwave版本，它起初是为Netscape浏览器开放的。当时，该公司流行的Director多媒体软件使用户能够创建交互式的应用程序和动画，并将其插入到Web文档中。Macromedia还在开发另一个媒体播放器，2002年它发布了Shockwave Flash player，这个播放器支持视频和音频。Shockwave Flash player使用FutureWave软件公司开发的SWF文件格式。SWF文件格式的主要目的是创建用于显示动画以及交换音频、视频和数据的更小文件。Adobe于2005年收购了Macromedia，Shockwave Flash player改名为Adobe Flash，这个特别的播放器成为通过浏览器传递多媒体时使用的播放器。
1996年Microsoft改进了过去的产品并且发表了DirectShow，之后成为Media Player 6.1，并作为Windows98的一部分发布（如图2.1所示）。
随着Windows 2000的发布，Microsoft发布了Windows Media Player7.1版本。这个版本具有大大改进的图形界面，在总体上提供了更好的体验。这个版本还自带了Codec（编码解码器），用于创建和回放媒体内容的特殊文件协议。
注意：
第3章和第4章中你将分别看到有关HTML5音频和视频Codec的更多内容。在后续的版本中，Microsoft改进了Media Player，持续不断地改善这一产品。
Microsoft还致力于一个与Adobe Flash竞争的应用程序框架，可以运行浏览器插件（为其他更大的软件应用如浏览器添加特定功能的一组小型软件组件）以及其他丰富的互联网应用程序。Microsoft Silverlight最早发行于2007年，支持许多不同的音频和视频格式，以及动画和交互。一开始，它的采用率很低，但是到2011年6月，它已经渗透到大约73%的市场，而Adobe Flash保持着97%的市场份额。
苹果公司也从早期就加入了多媒体播放器的竞争。它的第一个QuickTime版本发行于1991年，用于其System Software 6操作系统。QuickTime在1999年发布4.0版本之前仅用于Mac电脑，此后也能运行于Windows并支持MP3音频播放。QuickTime 5和6能够播放视频和Flash，而第6版还支持MP4的回放。2005年发布了版本7，改进了MP4回放但是去掉了对Flash内容的支持。本书编写期间最高版本的QuickTime是用于Mac OS的第10版，而不同特色的Microsoft Windows拥有较早的版本。
每个供应商都有自己的多媒体交付方法，当然都不完美。在Web文档中嵌入音频和视频没有标准化的方法，因此，为了标准化多媒体的嵌入，audio和video元素成为了HTML5规范的一部分。
2.1.2 媒体播放器的问题所有媒体播放器都有一个共同的问题，那就是最终用户都需要安装合适的插件，才能播放所需的音频或者视频。最早，所有这些插件都启动各自的媒体播放器播放音频或者视频。之后出现了在浏览器中显示多媒体的功能，但是弹出式窗口（在浏览器之外启动合适的播放器）仍然很常见。如果所需的插件在系统中不存在，你就必须下载这个插件，这很麻烦，因为你需要经常更新插件。此外，来自不同供应商的不同插件可能互相冲突，导致浏览器不稳定。例如，VLC Media Player与Windows Media Player在Firefox中冲突，有时候在查看WMV文件时会导致Firefox崩溃。
安全也是一个问题，因为插件过去曾经是（现在仍然是）恶意软件的主要目标。例子之一是2011年3月所发现的，Flash Player 10.2中的一个严重漏洞会导致远程攻击者在受感染的机器上执行任意代码或者导致拒绝服务攻击。
这些漏洞当然很快就被检测到，供应商很快就为之加上了补丁，推出新的版本。但是这同样意味着用户必须在新版本出现后不断地升级。
最流行的插件——Flash有一个重大的问题，是苹果公司于2010年4月决定在iPhone和iPad上不支持Flash。这当然会使Flash内容完全无法用于这些设备上。
现在让我们看看这些媒体播放器如何通过它们的插件播放HTML中必需的音频或者视频。
2.1.3 HTML元素过去，为了在你的Web文档中嵌入插件以启动媒体播放器，你可以使用各种HTML元素。尽管使用这些元素是过去就完成的方法，你仍然必须知道这些元素和它们的用法，因为令人遗憾的是，并不是所有浏览器都支持HTML5多媒体。你将在第3章和第4章中看到更多有关浏览器对HTML5多媒体支持缺失的内容。
实际上，可以使用3种不同的HTML元素：
appletembedobjectapplet元素正如其名称所示，仅用于嵌入Java小应用程序（applet），实际上在HTML4.01中已被弃用。该元素允许在所在的Web文档中的任何地方嵌入一个Java applet。你很有可能永远不需要使用这个元素，因为它已经过时，我们继续后面的内容。Embed元素由Netscape 2.0浏览器引入，允许开发人员在Web文档中嵌入任何数据对象。如果必要的插件没有安装在系统上，通常会显示一个警告和空的方框。用于播放一个MIDI文件的嵌入代码示例如：
<embed src="myMidiFile.mid"height="60"width="144">这里浏览器被告知myMidiFile.mid在指定位置以特定的大小嵌入到浏览器中。
注意：
embed元素在HTML5中正式退出，最终成为HTML规范的一个有效部分。但是大部分浏览器在HTML5之前就已经支持这个元素，实际上它从来就不是一个有效的元素。Object元素替换了HTML4.01中的applet和embed元素（它们实际上都不存在于任何规范中），它所含的媒体更加通用，因此，它可以用于嵌入Java小应用、音频和视频。Object元素相当强大，可以接受大量参数和数据对象类型，但是这也造成了显示的困难。下面的例子说明了Object元素如何嵌入一个Adobe Flash视频文件：
<object type="application/x-shockwave-flash"width="512" p height="300"wmode="transparent"data="flvplayer.swf? p file=myFlashVideo.flv&autoStart=true"> <param name="movie"value="flvplayer.swf?file= p myFlashVideo.flv&autoStart=true" /> <param name="wmode" value="transparent" /> <param name="allowscriptaccess"value="always"/> <param name="allowfullscreen"value="always"/> </object>上述代码通过type属性中的MIME（多用途互联网邮件扩展）类型向浏览器指明object元素中的内容是Flash。这段代码还设置了对象容器的高度和宽度，并使用wmode属性通知浏览器HTML页面的背景在Flash内容的透明部分显露出来。data属性用于指向包含容器实际内容的一个有效URL。
param元素用于向嵌入式内容添加不同的参数。正如你所看到的，例子中的一个param元素设置的movie参数与object元素中设置的data属性值相同。这导致了重复，但是令人难过的是，这是必要的应变手段。如果浏览器不知道如何播放MIME类型为application/ x-shockwave-flash的对象，它将检查下一个子元素并且了解能否播放该元素（在这个例子中是movie的param设置）。
wmode参数也再次设置，以防浏览器不理解对象声明的第一个设置。其他两个参数是：allowscriptaccess——允许HTML页面与需要交互的对象进行交互；allowfullscreen——允许对象在用户请求时全屏播放。
你可能同意，上述的代码初看有点令人费解。幸运的是，HTML5使多媒体对象的嵌入比原来容易得多，因为多媒体现在对浏览器来说是原生功能。
相关资源：从入门到精通HTML5——PDF——网盘链接