HTML 多媒体

一、多媒体简介

　　Web 上的多媒体指的是音效、音乐、视频和动画，多媒体有多种不一样的格式，它能够是听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。在互联网上，几乎在全部网站都能发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。

　　第一代浏览器只支持文本，并且即便是对文本的支持也仅限于单一字体和单一颜色，随后诞生了支持颜色、字体和文本样式的浏览器，还增长了对图片的支持。不一样的浏览器以不一样的方式处理对音效、动画和视频的支持，某些元素可以之内联的方式处理，而某些则须要额外的插件。

 

二、多媒体格式

　　多媒体元素（好比音频和视频）存储于媒体文件中。肯定媒体类型最经常使用的方法就是查看文件扩展名，例如当浏览器获得文件扩展名为 .html 时，他会自动识别该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表，图片格式则经过 .gif 或 .jpg 来识别。多媒体元素也拥有带有不一样扩展名的文件格式，好比 .mp三、.mp四、.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。

 

三、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 须要安装插件才能显示此内容。

 

四、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 吗？个人电脑默认使用酷狗播放音乐，点击打开以后，自启动酷狗音乐播放该音频，而点击保存则下载该音频。

 

五、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> 元素一样拥有方法、属性和事件。

 

六、内联媒体

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

　　若是你打算在 web 应用程序中使用内联媒体时，你须要意识到不少人都以为内联媒体使人恼火，好比打开页面以后就播放视频广告，或者播放音乐，而且用户能够自行关闭浏览器中的内联媒体选项。

　　所以建议只在用户但愿看到内联媒体的地方包含它们，好比在用户须要听到录音或者看到视频时，点击某个连接，打开页面而后播放媒体。或者为了加强动态交互，增长用户体验，能够在用户鼠标划过特定内容时，播放简短的音效，使页面内容更生动。

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

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

 

七、HTML 多媒体标签

　　<audio> (H5) 标签订义了声音，好比音乐或其余音频流。

　　<video> (H5) 标签订义视频，好比影片或者其余视频流。

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

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