1、多媒体简介
Web 上的多媒体指的是音效、音乐、视频和动画，多媒体有多种不同的格式，它可以是听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。在互联网上，几乎在所有网站都能发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。
第一代浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色，随后诞生了支持颜色、字体和文本样式的浏览器，还增加了对图片的支持。不同的浏览器以不同的方式处理对音效、动画和视频的支持，某些元素能够以内联的方式处理，而某些则需要额外的插件。
2、多媒体格式
多媒体元素（比如音频和视频）存储于媒体文件中。确定媒体类型最常用的方法就是查看文件扩展名，例如当浏览器得到文件扩展名为 .html 时，他会自动识别该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表，图片格式则通过 .gif 或 .jpg 来识别。多媒体元素也拥有带有不同扩展名的文件格式，比如 .mp3、.mp4、.wmv 以及 .swf。
(1)、音频格式
最常见的就是 mp3 格式的音乐文件，MP3 是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3，它被设计用来大幅度地降低音频数据量。
以下是常见的五种音频格式：
①、MP3 格式，文件扩展名 .mp3。
MP3 文件实际上是 MPEG 文件的声音部分，MP3 是其中最受欢迎的针对音乐的声音格式。
②、WMA 格式，文件扩展名 .wma。
WMA 格式（Windows Media Audio），质量优于 MP3，兼容大多数播放器，除了 iPod，他也是最常见的一种音乐文件格式，WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
③、Wave 格式，文件扩展名 .wav。
Wave 格式是由 IBM 和微软开发的，所有运行 Windows 的计算机和所有浏览器（除了 Chrome）都支持它。
④、RealAudio 格式，文件扩展名 .rm 或 .ram。
RealAudio 格式是由 Real Media 针对因特网开发的，该格式也支持视频，该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，所以质量常会降低。
⑤、MIDI 格式，文件扩展名 .mid 或 .midi。
MIDI（Musical Instrument Digital Interface）是一种针对电子音乐设备（比如合成器和声卡）的格式，MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。因此 MIDI 得到了广泛的平台上大量软件的支持，大多数流行的浏览器都支持 MIDI 格式。
(2)、视频格式
MP4 是最常见的一种视频播放格式，如果经常下载电影，那么对于 AVI、WMV、.swf 或 .flv 也不会陌生。3GP 是一种常用于手机播放视频的格式，他一种 3G 流媒体的视频编码格式，是 MP4 格式的一种简化版本，减少了储存空间和较低的频宽需求，让手机上有限的储存空间可以使用。
以下是常见的七种视频格式：
①、MPEG 格式，文件扩展名 .mpg 或 .mpeg。
MPEG（Moving Pictures Expert Group，动态图像专家组）格式是因特网上最流行的格式，它是跨平台的，得到了所有最流行的浏览器的支持。MPEG 是针对运动图像和语音压缩制定国际标准的组织，专门负责音频和视频标准。
②、MP4格式，文件扩展名 .mp4。
MP4 即 Mpeg-4 是一种针对因特网的新格式， 并且是 HTML5 支持的视频格式。
③、AVI 格式，文件扩展名 .avi。
AVI (Audio Video Interleave) 格式是由微软开发的，所有运行 Windows 的计算机都支持 AVI 格式，它是因特网上很常见的格式，但非 Windows 计算机并不是总能够播放。
④、WMV 格式，文件扩展名 .wmv。
WMV 格式（Windows Media Video）是由微软开发的，Windows Media 在因特网上很常见，但是如果未安装额外的组件，就无法播放 Windows Media 电影，一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
⑤、Flash 格式，文件扩展名 .swf 或 .flv。
Flash 格式是由 Macromedia(纳斯达克：MACR) 公司开发的，该格式需要额外的组件来播放，但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
⑥、RealVideo 格式，文件扩展名 .rm 或 .ram。
RealVideo 格式是由 Real Media 针对因特网开发的，该格式允许低带宽条件下（在线视频、网络电视）的视频流，由于是低带宽优先的，所以质量常会降低。
⑦、QuickTime 格式，文件扩展名 .mov。
QuickTime 格式是由苹果公司开发的，该格式也是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外组件的 Windows 计算机上播放。
注意：HML5 的最新标准支持 MP3， WAV 和 Ogg 音频格式，视频格式只支持 MP4，WebM 和 Ogg 格式。
Ogg 全称是 OGG Vorbis， 是一种新的音频压缩格式，Vorbis 是这种音频压缩机制的名字，文件扩展名是 .ogg。该文件格式在网上实在是太难找了，音频文件还能找见，视频文件反正我是一个都没找见，但是可以使用视频转换器转换格式，先后下载了魔音工厂和格式工厂，但都支持 OGG 音频文件的转换，并不能转换为 OGG 格式的视频，所幸大多数浏览器都支持 MP4 格式的视频文件，最后又下载里狸窝视频转换器，终于是可以将一个 MP4 文件转换为 WebM 格式了，但同样也不支持 OGG 视频的转换。据说可以使用 Miro Video Converter 和 Easy HTML5 Video 将任何格式的视频转换为 HTML5 视频格式，目前还没有尝试。
WebM 是由 Google 提出的，是一个开放、免费的媒体文件格式，该影片格式其实是以 Matroska（即 MKV）容器格式为基础开发的新容器格式，里面包括了 VP8 影片轨和 Ogg Vorbis 音轨。WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式，其重点是解决视频服务这一核心的网络用户体验，WebM 标准的视频更加偏向于开源并且是基于 HTML5 标准的，扩展名为 .webm。
3、HTML 插件
插件的功能是扩展 HTML 浏览器的功能，插件有也被称为辅助应用程序，是可由浏览器启动的程序，辅助程序可用于播放音频和视频，以及其他。插件可以通过 <object> 标签或者 <embed> 标签添加在页面中，大多数辅助应用程序允许用户来控制部分或全部播放设置，比如后退、暂停、停止和播放。
(1)、<object> 元素
<object> 元素定义了在 HTML 文档中嵌入的对象，该标签用于插入对象，例如在网页中嵌入 Java 小程序，PDF 阅读器，Flash 播放器。目前大多数主流浏览器都支持 <object> 标签。
插入视频：<object data="demo.swf" width="200" height="50"></object>
Firefox 不支持将该标签用于插入视频。
Chrome 支持使用该标签播放 Flash 格式的视频，但是无播放插件，直接播放，IE 不支持。
IE 和 Chrome 支持使用该标签播放 MP4 格式的视频，IE8 及之前版本不支持。
或者插入一张图片：<object data="icon.jpg"></object>
<object> 元素同样可用于包含 HTML 文件：<object data="index.html" width="100%" height="500px"></object>
(2)、<embed> 元素
<embed> 元素定义了一个容器，用来嵌入外部应用或者插件。目前所有主流浏览器都支持 <embed> 元素。
插入视频：<embed src="demo.mp4" width="480" height="270">
Firefox 需要安装插件才能显示此内容。
IE 和 Chrome 支持使用该标签播放 MP4 格式的视频，并且 IE8 及之前版本也支持。
只有 Chrome 支持使用该标签播放 Flash 格式的视频，但是无播放插件，直接播放。
或者插入一张图片：<embed src="icon.jpg">
在 IE 中会显示滚动条，在 Chrome 和 Firefox 中显示图片大小，无滚动条，IE8 及之前版本不支持。
<embed> 元素同样可用于包含 HTML 文件：<embed src="index.html" width="100%" height="500px">
4、HTML 音频（Audio）
声音在 HTML 中可以以不同的方式播放，在 HTML5 出现之前在网页中播放音频并不容易，需要确保音频文件在所有浏览器中（IE，Chrome，Firefox，Safari，Opera）和所有硬件上（PC，Mac，iPad，iPhone）都能够播放。
(1)、使用插件
浏览器插件是一种扩展浏览器标准功能的小型计算机程序，插件可以使用 <object> 标签或者 <embed> 标签添加在页面上，这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们会由浏览器自动显示，也会由外部插件显示。
(2)、使用 <object> 元素
<object> 标签可以定义外部内容的容器，主要被用来定义一个嵌入式世的对象。object 对象一个优点是，对于不支持该元素或者未显示该元素的浏览器，就会执行位于 <object> 和 </object> 之间的代码，通过这种方式，我们能够嵌套多个 object 元素，每个对应一个浏览器。使用该元素嵌入音频如下：
<object data="audio/海浪.mp3" width="300" height="100">暂不支持。</object>
存在的问题：①：在 Chrome 下可直接播放，IE 限制网页运行脚本或 ActiveX 控件，点击允许阻止内容后，即可播放，但是 Firefox 不支持该标签用于插入音频，也不支持 ActiveX 控件。②：如果浏览器不支持该音频格式，就无法播放该音频。③：如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
(3)、使用 <embed> 元素
<embed> 标签也可以定义外部内容的容器，主要被用来定义一个容器，用于嵌入外部应用或者插件。这是一个 HTML5 标签。该元素没有关闭标签，因此不能使用替代文本。使用该元素嵌入音频如下：
<embed src="audio/甘心情愿.mp3" width="300" height="100" />
存在的问题：①：不同的浏览器对音频格式的支持不同。②：如果用户的计算机未安装插件，就无法播放音频。虽然 Firefox 支持 Ogg 格式，但还是需要安装插件来显示内容。③：如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
(4)、使用 HTML5 <audio> 元素
<audio> 是 HTML5 中新增加的元素，主要被用来定义声音，比如音乐或其他音频流，目前所有主流浏览器都支持该标签。使用该元素嵌入音频如下：
<audio src="audio/平凡之路.ogg" controls autoplay></audio>
使用 <audio> 元素，只能规定一个音频文件，对于不支持此格式的浏览器，就无法播放，IE 就不支持此格式，播放器显示：错误，音频播放已中止，在 IE 中限制网页运行脚本或 ActiveX 控件，点击允许阻止内容后，则显示：错误：音频类型不受支持或文件路径无效，在 Chrome 和 Firefox 中可正常播放。
<audio> 元素如果不使用属性，就无法播放音频。上面的例子，让我们能在页面上看到播放器，并且在打开页面之后即可播放，完全得益于这两个属性：controls 和 autoplay。controls 属性用于向用户显示音频控件，也就是播放器，用户可以自行操作，比如播放/暂停。autoplay 属性规定音频在就绪后马上播放。该元素还有几个重要属性：src 规定媒体文件的 URL。loop 属性规定每当音频结束时重新开始播放。muted 属性规定音频输出为静音。preload 属性规定是否在页面加载后载入音频。该属性有3个值：preload="none|auto|meta"，当值为 none 时，规定当页面加载后不载入音频，当值为 auto 时，规定当页面加载后载入整个音频，当值为 meta 时，规定当页面加载后只载入元数据。
要想音频支持所有浏览器，可以在 <audio> 标签中嵌套使用 <source> 标签，定义两种格式的音频文件。如下：
1 <audio controls autoplay> 2 <source src="audio/平凡之路.ogg" type="audio/ogg"> 3 <source src="audio/彼岸.mp3" type="audio/mpeg"> 4 </audio>
<source> 是 HTML5 中新增加的元素，作用就是为媒体元素（比如 <video> 和 <audio>）定义媒体资源，该标签允许定义两个音频频/视频文件共浏览器根据它对媒体类型的支持进行选择。该标签有3个属性：src 属性规定媒体文件的 URL， type 属性规定媒体元素的类型， medai 属性指定媒体资源的类型（文件为什么样的媒体/设备进行了优化）。浏览器使用该属性，以决定是否下载，即确定是否可以播放该文件，如果它不能，它可以选择不下载文件。该属性可接受多个值，但是目前几乎所有主流浏览器都不支持此属性。
在使用 <audio> 标签时，必须把音频文件转换为不同的格式，确保所有浏览器都支持，但是在老式浏览器中该元素无效，比如 IE8 就不支持该元素，而 IE8 以上的新版本浏览器都可以使用。
所有浏览器都支持以 mp3 或 ogg 来播放音频，但如果不支持 <audio> 元素，可以在 <audio> 标签中嵌套使用 <embed> 元素，但使用<embed> 元素无法回退来显示错误消息。兼容代码如下：
1 <audio autoplay> 2 <source src="audio/甘心情愿.mp3" type="audio/mpeg"> 3 <source src="audio/平凡之路.ogg" type="audio/ogg"> 4 <embed src="audio/海浪.mp3" height="100" width="300"> 5 </audio>
在 IE8 以及更低版本的浏览器中，会自动播放 <embed> 元素中规定的音频，但是 IE 会限制网页运行脚本或 ActiveX 控件，需要点击允许阻止内容后，才可播放。
注意：IE、Chrome、Firefox 和 Safari 支持 MP3 格式的音频，但是 IE 和 Safari 不支持 Ogg 格式，Chrome、Firefox 和 Opera 支持此格式。
(5)、使用超链接
如果网页包含指向媒体文件的超链接，大多数浏览器会使用"插件"来播放文件。如下是一个指向 MP3 文件的超链接，当用户点击该链接后，浏览器会启动"插件"来播放该文件：
<a href="audio/十三电音.mp3" target="_blank">播放音乐！</a>
上面的代码，在 Chrome 和 Firefox 中点击链接后浏览器会启动插件播放该音频，而在 IE 中（包括 IE8 及之前版本）点击链接后会提示：要打开或保存来自 XX 的 十三电音.mp3 吗？我的电脑默认使用酷狗播放音乐，点击打开之后，自启动酷狗音乐播放该音频，而点击保存则下载该音频。
5、HTML 视频（Video）
同在 HTML 中播放音频一样，在页面中播放视频也有很多种方法，同样也需要确保视频文件在所有浏览器中和所有硬件上都能够播放，也可以使用 <object> 和 <embed> 标签来完成视频的播放，但前边我们说这两个标签主要被用来定义一个嵌入的插件，因此不建议使用这2个标签来插入音频或者视频，最好是使用 HTML5 中 <audio> 和 <video> 标签来显示音频和视频。
(1)、使用 HTML5 <video> 元素
<video> 是 HTML5 中新增加的元素，主要被用来定义视频，比如电影片段或其他视频流，目前所有主流浏览器都支持该标签。使用该元素嵌入视频如下：
<video src="video/如果你也听说.mp4" width="320px" height="240px" controls autoplay></video>
使用 <video> 元素，也只能规定一个视频文件，对于不支持此格式的浏览器，就无法播放，在 IE 中播放视频时，IE 会限制网页运行脚本或 ActiveX 控件，点击允许阻止内容后，开始播放。
同样的，<video> 元素如果不使用属性，就无法播放视频。如果为视频规定了尺寸，而忘了规定播放控件和就绪后播放的属性，那么在浏览器中就显示规定尺寸大小的黑块。controls 和 autoplay 属性规定向用户显示播放控件和就绪后马上播放。src 属性规定要播放视频的 URL。width 和 height 属性用于设置视频播放器的宽度和高度，需要注意：不能使用这两个属性来缩小视频，这样会迫使用户下载原始的视频，即时他在网页中显示的很小。规定视频的高度和宽度是一个好习惯，如果设置这些属性，在页面加载时会为视频预留出空间，如果没有设置这些属性，那么浏览器就无法预先确定视频的尺寸，这样就无法为视频保留合适的空间，浏览器会自动定义显示大小，结果是，在页面加载的过程中，其布局也会产生变化，造成意想不到的结果。loop 属性规定每当视频结束时重新开始播放。muted 属性规定视频频输出为静音。preload 属性：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。该属性有3个值：preload="none|auto|meta"，当值为 none 时，指示页面加载后不加载音频/视频。当值为 auto 时，指示页面加载后则加载音频/视频。当值为 meta 时，指示当页面加载后仅加载音频/视频的元数据。
要想视频支持所有浏览器，也可以在 <video> 标签中嵌套使用 <source> 标签，定义两种视频格式的文件。如下：
1 <video width="320px" height="240px" controls autoplay> 2 <source src="video/如果你也听说.webm" type="video/webm"> 3 <source src="video/预谋.mp4" type="video/mp4"> 4 </video>
几乎所有浏览器都支持 MP4 格式的视频播放，但是在老式浏览器中 <video> 元素无效，比如 IE8 就不支持该元素，而 IE8 以上的新版本浏览器都可以使用。对于不支持 <video> 元素的浏览器，可以在 <audio> 标签中嵌套使用 <embed> 元素，但使用<embed> 元素无法回退来显示错误消息，也可以使用 <object>元素。兼容代码如下：
1 <video width="320px" height="240px" controls autoplay> 2 <source src="video/预谋.mp4" type="video/mp4"> 3 <source src="video/如果你也听说.webm" type="video/webm"> 4 <embed src="video/爱就爱了.mp4" width="480px" height="270px"> 5 </video>
(2)、使用超链接
播放视频也可使用超链接方式，如果网页包含指向媒体文件的超链接，大多数浏览器会使用"插件"来播放文件。如下是一个指向 MP4 文件的超链接，当用户点击该链接后，浏览器会启动"插件"来播放该文件：
<a href="video/好乐Day.mp4">播放视频！</a>
上面的代码，在 Chrome 和 Firefox 中点击链接后浏览器会启动插件播放该视频，而在 IE 中（包括 IE8 及之前版本）点击链接后会提示：要打开或保存来自 XX 的 好乐Day.mp4 吗？点击打开之后，自启动本地默认视频播放器播放该视频，而点击保存则下载该视频。
(3)、使用优酷
如果你希望在网页中播放视频，还有一种方法就是使用优酷等视频网站，不过你需要先把显示的视频上传到优酷网上，然后在网页中使用 <embed> 标签将视频链接地址插入到 HTML 代码中即可播放，这是在 HTML5 出现之前在网页中显示视频最简单的方法。
注意：大多数浏览器都支持 MP4 格式的视频，Chrome 和 Firefox 还支持 WebM 格式的视频，但是 IE 不支持。
6、内联媒体
当你在网页中包含媒体元素，或者作为网页的组成部分时，它被称为内联媒体，当声音包含在网页中时，它被称为内联音频，而当视频被包含在网页中时，它被称为内联视频。
如果你打算在 web 应用程序中使用内联媒体时，你需要意识到很多人都觉得内联媒体令人恼火，比如打开页面之后就播放视频广告，或者播放音乐，并且用户可以自行关闭浏览器中的内联媒体选项。
因此建议只在用户希望看到内联媒体的地方包含它们，比如在用户需要听到录音或者看到视频时，点击某个链接，打开页面然后播放媒体。或者为了增强动态交互，增加用户体验，可以在用户鼠标划过特定内容时，播放简短的音效，使页面内容更生动。
注意：在播放视频时，一定要测试好文件再使用，否则显示在浏览器上，可能只有画面而没有声音。
7、HTML 多媒体标签
<audio> (H5) 标签定义了声音，比如音乐或其他音频流。
<video> (H5) 标签定义视频，比如影片或者其他视频流。
<source> (H5) 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源，并且允许规定2个不同的音频或视频文件格式供不支持某种格式的浏览器选择。
<track> (H5) 标签为媒体（<video> 和 <audio>）元素定义外部文本轨道，比如字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。