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 是其中最受欢迎的针对音乐的声音格式。

② 、WAV 格式，文件扩展名 .wav。

WAV 是由微软公司推出的一种声音文件格式，它是最早的数字音频格式，用于保存 Windows平台的音频信息资源，被 Windows平台及其应用程序广泛支持。WAV 是最接近无损的音乐格式，与 CD 相差无几，因此 WAV 格式对存储空间需求太大不便于交流和传播。

③ 、WMA 格式，文件扩展名 .wma。

WMA （Windows Media Audio） ， 质量优于 MP3，兼容大多数播放器，除了 iPod，他也是最常见的一种音乐文件格式，WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。

④、APE 格式，文件扩展名 .ape。

APE 是流行的数字音乐无损压缩格式之一，是非常流行的一种音乐格式，WAV 格式体积过大，而 APE 格式大概只有原 CD 的一半，因此便于存储。

⑤、FLAC 格式，文件扩展名 .flac。

FLAC 也是流行的无损音频压缩格式之一，不同于其他有损压缩如 MP3，FLAC 是无损压缩，也就是说音频以 FLAC 编码压缩后不会丢失任何信息，可以还原音乐光盘音质，目前常见的无损压缩数字音乐格式就是：APE 和 FLAC。

⑥ 、MIDI 格式，文件扩展名 .mid 或 .midi。

MIDI（Musical Instrument Digital Interface）是一种针对电子音乐设备（比如合成器和声卡）的格式，MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。 因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。因此 MIDI 得到了广泛的平台上大量软件的支持，大多数流行的浏览器都支持 MIDI 格式。

(2)、视频格式

MP4 是最常见的一种视频播放格式，如果经常下载电影，那么对于 .avi、.rmvb、.swf 或 .flv 也不会陌生。3GP 是一种常用于手机播放视频的格式，他一种 3G 流媒体的视频编码格式，是 MP4 格式的一种简化版本，减少了储存空间和较低的频宽需求，让手机上有限的储存空间可以使用。

以下是常见的五种视频格式：

① 、MP4 格式，文件扩展名 .mp4。

MP4 即 Mpeg-4 是一种针对因特网的新视频格式， 并且是 HTML5 支持的视频格式。

MPEG（Moving Pictures Expert Group，动态图像专家组）格式是因特网上最流行的格式，它是跨平台的，得到了所有最流行的浏览器的支持。MPEG 是针对运动图像和语音压缩制定国际标准的组织，专门负责音频和视频标准，他用于视频的文件扩展名还有 .mpg 等。

②、AVI 格式，文件扩展名 .avi。

AVI (Audio Video Interleave) 格式是由微软开发的，所有运行 Windows 的计算机都支持 AVI 格式，它是因特网上很常见的格式，但非 Windows 计算机并不是总能够播放。

③、Flash 格式，文件扩展名 .swf 或 .flv。

Flash 格式是由 Macromedia(纳斯达克：MACR) 公司开发的，该格式需要额外的组件来播放，但是该组件会预装到 Firefox 或 IE 之类的浏览器上。

④ 、RealVideo 格式，文件扩展名有四种格式：.ra、.rm、.ram、.rmvb。

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">

IE 和 Chrome 支持，IE8 及低版本不支持，Firefox 需要安装插件才能显示此内容。

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/帝都.wav" controls autoplay></audio>

使用 <audio> 元素，只能规定一个音频文件，对于不支持此格式的浏览器，就无法播放，比如上面的例子，IE 就不支持 WAV 格式，播放器显示：错误，音频播放已中止，在 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 控件，需要点击允许阻止内容后，才可播放。

注意：所有浏览器都支持 MP3 格式的音频。 IE 和 Safari 不支持 Ogg 格式，而 Chrome、Firefox 和 Opera 都支持此格式。 Chrome、Firefox、Safari 和 Opera 都支持 WAV 格式，但是 IE 不支持，IE 只支持 MP3格式。

(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> 元素的浏览器，可以在 <video> 标签中嵌套使用 <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 格式的视频， IE 和 Safari 既不支持 Ogg 格式也不支持 WebM 格式， Chrome 和 Firefox 既支持 Ogg 格式也支持 WebM 格式， IE 只支持 MP4 格式。

<video> 元素可使用 DOM 进行控制，<video> 元素同样拥有方法、属性和事件。

6、内联媒体

当你在网页中包含媒体元素，或者作为网页的组成部分时，它被称为内联媒体，当声音包含在网页中时，它被称为内联音频，而当视频被包含在网页中时，它被称为内联视频。

如果你打算在 web 应用程序中使用内联媒体时，你需要意识到很多人都觉得内联媒体令人恼火，比如打开页面之后就播放视频广告，或者播放音乐，并且用户可以自行关闭浏览器中的内联媒体选项。

因此建议只在用户希望看到内联媒体的地方包含它们，比如在用户需要听到录音或者看到视频时，点击某个链接，打开页面然后播放媒体。或者为了增强动态交互，增加用户体验，可以在用户鼠标划过特定内容时，播放简短的音效，使页面内容更生动。

注意：在播放视频文件时，一定要测试好文件再使用，否则显示在浏览器上，可能只有画面而没有声音。

<audio> 和 <video> 元素都支持使用 DOM 进行控制， <audio> 和 <video> 元素的方法、属性和事件可以使用 JavaScript 进行操作， 其中的方法可用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件可通知我们，比说 <video> 元素开始播放、已暂停，已停止等等。

7、HTML 多媒体标签

<audio> (H5) 标签定义了声音，比如音乐或其他音频流。

<video> (H5) 标签定义视频，比如影片或者其他视频流。

<source> (H5) 标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源，并且允许规定2个不同的音频或视频文件格式供不支持某种格式的浏览器选择。

<track> (H5) 标签为媒体（<video> 和 <audio>）元素定义外部文本轨道，比如字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。