HTML 多媒体、Object 元素、音频、视频

Web 上的多媒体指的是音效、音乐、视频和动画。

现代网络浏览器已支持不少多媒体格式。

什么是多媒体？

多媒体来自多种不一样的格式。它能够是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。

在因特网上，您会常常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。

在本教程中，您将了解到不一样的多媒体格式，以及如何在您的网页中使用它们。

浏览器支持

第一款因特网浏览器只支持文本，并且即便是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入。

不一样的浏览器以不一样的方式处理对音效、动画和视频的支持。某些元素可以之内联的方式处理，而某些则须要额外的插件。

您将在下面的章节学习更多有关插件的知识。

多媒体格式

多媒体元素（好比视频和音频）存储于媒体文件中。

肯定媒体类型的最经常使用的方法是查看文件扩展名。当浏览器获得文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则经过 .gif 或 .jpg 来识别。

多媒体元素元素也拥有带有不一样扩展名的文件格式，好比 .swf、.wmv、.mp3 以及 .mp4。

视频格式

MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。

格式	文件	描述
AVI	.avi	AVI (Audio Video Interleave) 格式是由微软开发的。全部运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不老是可以播放。
WMV	.wmv	Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，可是若是未安装额外的（免费）组件，就没法播放 Windows Media 电影。一些后期的 Windows Media 电影在全部非 Windows 计算机上都没法播放，由于没有合适的播放器。
MPEG	.mpg .mpeg	MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，获得了全部最流行的浏览器的支持。
QuickTime	.mov	QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，可是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
RealVideo	.rm .ram	RealVideo 格式是由 Real Media 针对因特网开发的。该格式容许低带宽条件下（在线视频、网络电视）的视频流。因为是低带宽优先的，质量常会下降。
Flash	.swf .flv	Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式须要额外的组件来播放。可是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，而后所有转换为 .flv 或 .mp4 以供分发。愈来愈多的视频发布者转到 MP4，将其做为 Flash 播放器和 HTML5 的因特网共享格式。

声音格式

格式	文件	描述
MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（好比合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（好比声卡）播放的数字音乐指令。 点击这里播放 The Beatles。 由于 MIDI 格式仅包含指令，因此 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 获得了普遍的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio	.rm .ram	RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式容许低带宽条件下的音频流（在线音乐、网络音乐）。因为是低带宽优先的，质量常会下降。
Wave	.wav	Wave (waveform) 格式是由 IBM 和微软开发的。全部运行 Windows 的计算机和全部网络浏览器（除了 Google Chrome）都支持它。
WMA	.wma	WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可做为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
MP3	.mp3 .mpga	MP3 文件其实是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待将来的软件系统都支持它。

使用哪一种格式？

WAVE 是因特网上最受欢迎的无压缩声音格式，全部流行的浏览器都支持它。若是您须要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。

MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。若是您的网址从事录制音乐，那么 MP3 是一个选项。

<object> 的做用是支持 HTML 助手（插件）。

HTML 助手（插件）

辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。

辅助程序可用于播放音频和视频（以及其余）。辅助程序是使用 <object> 标签来加载的。

使用辅助程序播放视频和音频的一个优点是，您可以容许用户来控制部分或所有播放设置。

大多数辅助应用程序容许对音量设置和播放功能（好比后退、暂停、中止和播放）的手工（或程序的）控制。

在 HTML 中播放视频的最好方式？

如需了解在 HTML 中包含音视频的最好方法，请参阅下一章节。

使用 QuickTime 来播放 Wave 音频

实例

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="bird.wav" />
<param name="controller" value="true" />
</object>

使用 QuickTime 来播放 MP4 视频

实例

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4" />
<param name="controller" value="true" />
</object>

使用 Flash 来播放 SWF 视频

实例

<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>

使用 Windows Media Player 来播放 WMV 影片

下面的例子展现用于播放 Windows 媒体文件的推荐代码：

实例

<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%"
 height="100%" autostart="true" showcontrols="true" 
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

HTML 音频

在 HTML 中播放声音的方法有不少种。

问题，问题，以及解决方法

在 HTML 中播放音频并不容易！

您须要谙熟大量技巧，以确保您的音频文件在全部浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和全部硬件上（PC, Mac , iPad, iPhone）都可以播放。

在本章，W3School 为您总结了问题和解决方法。

使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

插件有不少用途：播放音乐、显示地图、验证银行帐号，控制输入等等。

可以使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。

这些标签订义资源（一般非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

使用 <embed> 元素

<embed> 标签订义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，可是全部浏览器中都有效）。

下面的代码片断可以显示嵌入网页中的 MP3 文件：

实例

<embed height="100" width="100" src="song.mp3" />

问题：

• <embed> 标签在 HTML 4 中是无效的。页面没法经过 HTML 4 验证。
• 不一样的浏览器对音频格式的支持也不一样。
• 若是浏览器不支持该文件格式，没有插件的话就没法播放该音频。
• 若是用户的计算机未安装插件，没法播放音频。
• 若是把该文件转换为其余格式，仍然没法在全部浏览器中播放。

注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

使用 <object> 元素

<object tag> 标签也能够定义外部（非 HTML）内容的容器。

下面的代码片断可以显示嵌入网页中的 MP3 文件：

实例

<object height="100" width="100" data="song.mp3"></object>

问题：

• 不一样的浏览器对音频格式的支持也不一样。
• 若是浏览器不支持该文件格式，没有插件的话就没法播放该音频。
• 若是用户的计算机未安装插件，没法播放音频。
• 若是把该文件转换为其余格式，仍然没法在全部浏览器中播放。

使用 HTML5 <audio> 元素

<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在全部浏览器中都有效。

实例

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

上面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。

为了使这段音频在 Firefox 和 Opera 中一样有效，添加了一个 ogg 类型的文件。若是失败，会显示错误消息。

问题：

• <audio> 标签在 HTML 4 中是无效的。您的页面没法经过 HTML 4 验证。
• 您必须把音频文件转换为不一样的格式。
• <audio> 元素在老式浏览器中不起做用。

注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

最好的 HTML 解决方法

实例

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

上面的例子使用了两个不一样的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。若是失败，代码将回退尝试 <embed> 元素。

问题：

• 您必须把音频转换为不一样的格式。
• <audio> 元素没法经过 HTML 4 和 XHTML 验证。
• <embed> 元素没法经过 HTML 4 和 XHTML 验证。
• <embed> 元素没法回退来显示错误消息。

注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

向网站添加音频的最简单方法

向网页添加音频的最简单的方法是什么？

雅虎的媒体播放器绝对算其中之一。

使用雅虎媒体播放器是一个不一样的途径。您只需简单地让雅虎来完成歌曲播放的工做就行了。

它能播放 mp3 以及一系列其余格式。经过一行简单的代码，您就能够把它添加到网页中，轻松地将 HTML 页面转变为专业的播放列表。

雅虎媒体播放器

实例

<a href="song.mp3">Play Sound</a>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

使用雅虎播放器是免费的。如需使用它，您须要把这段 JavaScript 插入网页底部：

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

而后只需简单地把 MP3 文件连接到您的 HTML 中，JavaScript 会自动地为每首歌建立播放按钮：

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。

请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。

使用超连接

若是网页包含指向媒体文件的超连接，大多数浏览器会使用“辅助应用程序”来播放文件。

如下代码片断显示指向 mp3 文件的连接。若是用户点击该连接，浏览器会启动“辅助应用程序”来播放该文件：

实例

<a href="song.mp3">Play the sound</a>

内联的声音

当您在网页中包含声音，或者做为网页的组成部分时，它被称为内联声音。

若是您打算在 web 应用程序中使用内联声音，您须要意识到不少人都以为内联声音使人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。

咱们最好的建议是只在用户但愿听到内联声音的地方包含它们。一个正面的例子是，在用户须要听到录音并点击某个连接时，会打开页面而后播放录音。

HTML 4.01 多媒体标签

标签	描述
<applet>	不同意。定义内嵌 applet。
<embed>	HTML4 中不同意，HTML5 中容许。定义内嵌对象。
<object>	定义内嵌对象。
<param>	定义对象的参数。

HTML 5 多媒体标签

标签	描述
<audio>	标签订义声音，好比音乐或其余音频流。
<embed>	标签订义嵌入的内容，好比插件。

在 HTML 中播放视频的方法有不少种。

实例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

亲自试一试

问题，问题，以及解决方法

在 HTML 中播放视频并不容易！

您须要谙熟大量技巧，以确保您的视频文件在全部浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和全部硬件上（PC, Mac , iPad, iPhone）都可以播放。

在本章，W3School 为您总结了问题和解决方法。

使用 <embed> 标签

<embed> 标签的做用是在 HTML 页面中嵌入多媒体元素。

下面的 HTML 代码显示嵌入网页的 Flash 视频：

实例

<embed src="movie.swf" height="200" width="200"/>

亲自试一试

问题

• HTML4 没法识别 <embed> 标签。您的页面没法经过验证。
• 若是浏览器不支持 Flash，那么视频将没法播放
• iPad 和 iPhone 不能显示 Flash 视频。
• 若是您将视频转换为其余格式，那么它仍然不能在全部浏览器中播放。

使用 <object> 标签

<object> 标签的做用是在 HTML 页面中嵌入多媒体元素。

下面的 HTML 片断显示嵌入网页的一段 Flash 视频：

实例

<object data="movie.swf" height="200" width="200"/>

问题

• 若是浏览器不支持 Flash，将没法播放视频。
• iPad 和 iPhone 不能显示 Flash 视频。
• 若是您将视频转换为其余格式，那么它仍然不能在全部浏览器中播放。

使用 <video> 标签

<video> 是 HTML 5 中的新标签。

<video> 标签的做用是在 HTML 页面中嵌入视频元素。

如下 HTML 片断会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：

实例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

问题

• 您必须把视频转换为不少不一样的格式。
• <video> 元素在老式浏览器中无效。
• <video> 元素没法经过 HTML 4 和 XHTML 验证。

最好的 HTML 解决方法

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

上例中使用了 4 中不一样的视频格式。HTML 5 <video> 元素会尝试播放以 mp四、ogg 或 webm 格式中的一种来播放视频。若是均失败，则回退到 <embed> 元素。

问题

• 您必须把视频转换为不少不一样的格式
• <video> 元素没法经过 HTML 4 和 XHTML 验证。
• <embed> 元素没法经过 HTML 4 和 XHTML 验证。

注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。

优酷解决方案

在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。

若是您但愿在网页中播放视频，那么您能够把视频上传到优酷等视频网站，而后在您的网页中插入 HTML 代码便可播放视频：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

使用超连接

若是网页包含指向媒体文件的超连接，大多数浏览器会使用“辅助应用程序”来播放文件。

如下代码片断显示指向 AVI 文件的连接。若是用户点击该连接，浏览器会启动“辅助应用程序”，好比 Windows Media Player 来播放这个 AVI 文件：

实例

<a href="movie.swf">Play a video file</a>

关于内联视频的一段注释

当视频被包含在网页中时，它被称为内联视频。

若是您打算在 web 应用程序中使用内联视频，您须要意识到不少人都以为内联视频使人恼火。

同时请注意，用户可能已经关闭了浏览器中的内联视频选项。

咱们最好的建议是只在用户但愿看到内联视频的地方包含它们。一个正面的例子是，在用户须要看到视频并点击某个连接时，会打开页面而后播放视频。

HTML 4.01 多媒体标签

标签	描述
<applet>	不同意。定义内嵌 applet。
<embed>	不同意。定义内嵌对象。（HTML5 中容许）
<object>	定义内嵌对象。
<param>	定义对象的参数。

HTML 5 多媒体标签

标签	描述
<video>	标签订义声音，好比音乐或其余音频流。
<embed>	标签订义嵌入的内容，好比插件。