你的位置:首页 > 网页设计

[网页设计]HTML 多媒体


1、多媒体简介

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

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

 

2、多媒体格式

  多媒体元素(比如音频和视频)存储于媒体文件中。确定媒体类型最常用的方法就是查看文件扩展名,例如当浏览器得到文件扩展名为 .html 时,他会自动识别该文件是 HTML 页面。.

  (1)、音频格式

  最常见的就是 mp3 格式的音乐文件,MP3 是一种音频压缩技术,其全称是动态影像专家压缩标准音频层面3(Moving Picture Experts Group Audio Layer III),简称为MP3,它被设计用来大幅度地降低音频数据量。

  以下是常见的五种音频格式:

  ①、MP3 格式,文件扩展名 .mp3 或 .mpga。

  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 吗?点击打开之后,自启动本地默认视频播放器播放该视频,而点击保存则下载该视频。

  (7)、使用优酷

  如果你希望在网页中播放视频,还有一种方法就是使用优酷等视频网站,不过你需要先把显示的视频上传到优酷网上,然后在网页中使用 <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>)元素定义外部文本轨道,比如字幕文件或其他包含文本的文件,当媒体播放时,这些文件是可见的。