27、网页中嵌入多媒体的方法与技巧

原创于 2025-11-15 12:42:39 发布 · 26 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#多媒体 #HTML #embed标签

24小时精通HTML与XHTML 专栏收录该内容

36 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

网页中嵌入多媒体的方法与技巧

1. 互联网多媒体现状

互联网多媒体尚处于发展初期，其快速发展带来了一些挑战：
- 文件格式不兼容 ：有众多不兼容的多媒体文件格式可供选择，且尚未形成明确的行业标准。
- 网络速度问题 ：许多人的网络连接速度不足以快速接收高质量的视听数据。
- HTML标签不一致 ：用于在网页中包含多媒体的HTML标签存在不一致性，不过HTML 4提供了一种标准方法，有望在未来解决这一问题。

鉴于技术的不断发展，如今实施的多媒体网站方案可能需要在不久后进行更改。不过，目前在一定程度上可以避开这些障碍，且未来克服这些问题可能会更加容易。

2. 获取多媒体内容的途径

在将多媒体放置到网页之前，需要先拥有多媒体内容。对于不擅长创作多媒体的人，可以通过以下途径获取：
1. 网络资源 ：网络上充满了各种类型的有用内容，在线有各种规模的媒体素材交易平台。可以访问 24 - Hour HTML Café的热门列表获取一些优质的媒体素材来源链接。
2. 免费资源 ：互联网上很多材料是免费的，但使用前最好与内容的作者或当前所有者再次确认，避免版权侵权。此外，美国政府的一些部门生成的内容依法属于全体美国人，例如在线的NASA素材可免费使用。
3. 搜索引擎 ：许多搜索引擎（如google.com、altavista.com、hotbot.com等）具备查找多媒体文件的特定搜索功能。只要注意版权问题，这是一种查找特定主题多媒体的简便方法。
4. 在线论坛和新闻组 ：可以查看针对摄像师兴趣的在线论坛和Usenet新闻组，清晰描述自己的网站和需求，可能会找到一些崭露头角的艺术家，他们很乐意让数千人在线浏览他们的作品。

3. 在网页上放置多媒体的三种方式

在网页中添加音频和视频有以下三种方式：
1. “旧方法” ：与所有网页浏览器具有最大兼容性。
2. “当前方法” ：最适合Netscape Navigator和Microsoft Internet Explorer的较新版本。
3. “新方法” ：仅适用于Netscape Navigator和Microsoft Internet Explorer的最新版本，但将是未来的官方标准技术。

在示例页面中使用了Windows AVI视频和MIDI声音文件。为了与非Windows计算机更好地兼容，也可以使用Apple的QuickTime音频/视频、RealAudio/RealVideo、流行的MP3声音格式或当今网页浏览器支持的任何其他媒体格式。无论选择哪种文件格式，将文件合并到网页的过程都是相同的。

4. 旧方法嵌入多媒体

将视频或音频文件合并到网站的最简单、最可靠的方法是使用 <a href> 进行链接，就像链接到另一个HTML文件一样。例如，以下代码可用于提供一个缅因州龙虾的AVI视频链接：

<a href="lobstah.avi">Play the lobster video.</a>

当用户点击“Play the lobster video”时， lobstah.avi 视频文件将被传输到其计算机。用户安装的任何辅助应用程序或插件在文件下载完成后会自动启动。如果找不到与AVI兼容的辅助程序或插件，网页浏览器会提供下载相应插件或将视频保存到硬盘以供日后查看的选项。

5. 使用 `<embed />` 标签嵌入声音

在过去几年中，Microsoft和Netscape针对在网页中放置多媒体提出了各种相互冲突的解决方案，其中一些（如Microsoft对 <img> 标签的专有扩展）现已完全过时。Netscape的 <embed /> 标签仍然比官方HTML 4的 <object> 标签与Netscape和Microsoft浏览器的兼容性更好，尽管从长远来看， <object> 标签可能会取代 <embed /> 标签，但目前使用 <embed /> 标签能确保大多数人成功查看多媒体内容。将 <embed> 标签放在 <object> 标签内是更好的方法，可使新旧浏览器都能成功识别和显示多媒体对象。

<embed /> 标签可将任何类型的文件直接放入网页，但用户必须安装能识别传入数据类型并知道如何处理的插件或辅助应用程序。Internet Explorer和Netscape Navigator附带的媒体播放器可以处理大多数常见媒体类型，如WAV、AU、MPEG、MID、EPS、VRML等。其他公司也提供许多插件来处理几乎任何类型的媒体文件，如Adobe的流行PDF Acrobat文件格式。

以下是一个嵌入声音剪辑的示例：

<embed src="hello.wav">

与 <img> 标签类似， <embed /> 标签需要 src 属性来指示嵌入媒体文件的地址，也可以使用 align 、 width 和 height 属性。这些属性的解释方式与静态图像相同，但实际数据显示由用户安装的插件或辅助应用程序处理。对于声音文件，会播放声音并通常显示一些控件，具体显示哪些控件取决于用户安装的插件或辅助应用程序。

<embed /> 标签还可以设置任意数量的可选参数，这些参数特定于插件或播放器程序。例如：

<embed src="atune.mid" width="1" height="1" autostart="true" loop="true" hidden="true" />

这会使音乐文件 atune.mid 在页面显示时播放，且对页面没有任何视觉影响。

以下是一个完整的使用 <embed /> 标签嵌入多媒体文件的示例：

<html><head><title>Music</title></head>
<body background="wiggles.jpg">
<a href="nosound.htm">
<img src="shutup.gif" border="0" align="right" alt="Stop music">
</a>
<table width="500">
<tr><td><img src="piano.gif" width="200" height="172"></td></tr>
<tr><td><b>Roaming through the jungle of ‘oohs’ and ‘ahs,’
searching for a more agreeable noise, I live a life of
primitivity with the mind of a child and an unquenchable
thirst for sharps and flats.</b>
&#151;Duke Ellington, <i>Music Is My Mistress</i>
</td></tr></table>
<embed src="atune.mid" width="1" height="1"
autostart="true" loop="true" hidden="true" />
</body></html>

autostart 、 loop 和 hidden 不是 <embed /> 标签的标准属性，浏览器会将它们交给插件程序解释。一些插件支持这些属性，可让插件在视频加载后自动播放、循环播放以及不在网页上显示任何控件。如果用户有不同的AVI插件或根本没有处理MIDI文件的插件，这些属性将不起作用。可以参考每个插件开发者的网页，了解其插件在 <embed /> 标签中接受的命令。

如果找不到适合 <embed /> 标签的插件，Netscape Navigator和Microsoft Internet Explorer可能会嵌入其他辅助应用程序（如Windows Media Player）来播放媒体文件，因此声音可以在这两种浏览器中成功播放。

6. 使用 `<embed />` 标签嵌入视频

以下是一个使用 <embed /> 标签嵌入Windows AVI格式视频剪辑的示例：

<html><head><title>Fractal Video Clip</title></head>
<body>
<embed src="3dtetra2.avi" autostart="true" loop="true"
width="160" height="120" vspace="10" hspace="20" align="left" />
<h2>A Spinning 3-D Fractal</h2>
If the video clip to the left doesn't start on its own,
click on it to make it play. Once it starts, you can
right-click on it and choose Pause to make it stop.
</body></html>

当设置网页自动播放声音时，最好提供一种关闭声音的方式，最简单的方法是链接到一个没有嵌入声音的页面。例如，点击图20.1右上角的 shutup.gif 图标会加载一个无声但其他方面相同的页面。

当Navigator和Internet Explorer遇到 <embed /> 标签时，会尽力直接在网页中嵌入媒体文件。作为网页作者，无法预测会选择哪个插件或辅助应用程序，但可以在网页上提供一些说明，告知用户从哪里下载合适的播放器。目前嵌入式辅助应用程序仅在Windows平台上工作，Macintosh或UNIX用户无法使用。只要用户安装了正确的播放器软件，就可以使用 <embed /> 标签处理任何类型的音频、视频或交互式多媒体文件。但网页作者无法控制或了解访问者计算机上配置的文件类型和应用程序，甚至不知道有多少访问者使用Microsoft Windows操作系统，因此 <embed /> 标签的特殊用途可能更适合企业内部网或对目标受众计算机设置有一定控制的情况。

以下是一个简单的流程图，展示使用 <embed /> 标签嵌入多媒体的过程：

graph LR
    A[开始] --> B[选择多媒体文件]
    B --> C[使用<embed />标签嵌入]
    C --> D{用户有合适插件?}
    D -- 是 --> E[播放多媒体]
    D -- 否 --> F[提示下载插件或保存文件]
    E --> G[结束]
    F --> G

表1：常见媒体格式及对应MIME类型
| 媒体格式 | MIME类型 |
| ---- | ---- |
| WAV Audio | audio/x - wav |
| AU Audio | audio/basic |
| MP3 Audio | audio/mpeg |
| MIDI Audio | audio/midi |
| AVI | video/x - msvideo |
| MPEG Video | video/mpeg |
| QuickTime | video/quicktime |

7. 使用 `<object>` 标签嵌入多媒体

Netscape的 <embed /> 标签由于技术和政治等多方面原因受到质疑，官方已推出新的 <object> 标签来取代它，该标签得到了Netscape、Microsoft和万维网联盟（W3C）标准制定委员会的认可，它不仅能实现 <embed /> 标签的功能，还具备更多特性。不过， <object> 标签在不同浏览器中的支持情况仍不一致，主要原因是Internet Explorer在该标签标准化之前就支持它，并且包含了一些Netscape Navigator不支持的专有属性。尽管这些不一致性在一定程度上正在得到解决，但在短期内仍是一个问题。

以下是使用 <object> 标签显示之前示例中分形视频的代码：

<object data="3dtetra2.avi" type="video/x-msvideo" width="160" height="120" align="left" />

代码中除了 type 属性可能需要特别注意外，没有其他复杂的地方。 type 属性用于标识所显示的媒体类型，必须指定为标准的Internet MIME类型。以下是一些常见声音和视频格式的MIME类型：
| 媒体格式 | MIME类型 |
| ---- | ---- |
| WAV Audio | audio/x - wav |
| AU Audio | audio/basic |
| MP3 Audio | audio/mpeg |
| MIDI Audio | audio/midi |
| AVI | video/x - msvideo |
| MPEG Video | video/mpeg |
| QuickTime | video/quicktime |

这些MIME类型应在 <object> 标签的 type 属性中使用，以标识 data 属性中引用的多媒体对象的类型。

在实际使用中，为了让支持不同标签的浏览器都能成功识别和显示多媒体对象，可以将 <embed> 标签嵌套在 <object> 标签内。以下是一个示例代码片段：

<object classid="clsid:D27CDB6E - AE6D - 11cf - 96B8 - 444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version = 5,0,0,0"
width="400" height="250" id="myFlash">
    <param name="movie" value="MyFlashMovie.swf">
    <param name="quality" value="high">
    <param name="swliveconnect" value="true">
    <embed src="MyFlashMovie.swf" quality="high" width="400" height="250"
    type="application/x - shockwave - flash"
    pluginspage="http://www.macromedia.com/downloads/"
    name="myFlash" swliveconnect="true">
    </embed>
</object>

上述代码中，为 <object> 标签指定了ActiveX插件。第一行中的大序列号样式的代码是Macromedia Shockwave ActiveX控件的唯一类ID，每个ActiveX控件都有一个唯一的类ID用于与其他控件区分。 <object> 标签内使用了多个 <param> 标签来进一步描述Shockwave（Flash）多媒体对象，包括文件名和质量等。每个 <param> 标签包含 name 和 value 属性，用于设置多媒体对象的属性。如果省略 <embed> 标签，该 <object> 标签可以在完全支持 <object> 标签和Shockwave ActiveX插件的浏览器中完美显示Flash电影。而嵌套 <embed> 标签是为了使代码与旧版本浏览器兼容。

8. 关于嵌入多媒体的建议

在网页开发过程中，嵌入多媒体可能会遇到HTML扩展和媒体格式不兼容的问题，这对于网页作者来说可能会感到有些困惑，对于普通用户来说，当网页视频遇到不兼容的浏览器时，情况可能会更加糟糕。因此，建议在目前的情况下，如果可能的话，尽量避免使用嵌入式多媒体。大多数人更喜欢使用传统的可点击链接来访问多媒体文件，例如 <a href="hotvideo.avi">hot video (avi format, 240k)</a> 允许用户在需要时播放视频，或者将其下载到硬盘上播放。如果有软件可以在AVI和QuickTime之间进行转换，建议同时提供两种格式的同一视频链接，以满足Windows和Macintosh用户的需求（如果是音频剪辑，则提供WAV和AU格式）。

为了亲身体验网页多媒体的新旧方法，可以将浏览器访问 http://www.24hourHTMLcafe.com/hour20/ 。

以下是一个流程图，展示使用 <object> 标签和 <embed> 标签结合嵌入多媒体的过程：

graph LR
    A[开始] --> B[选择多媒体文件]
    B --> C[使用<object>标签包裹<embed>标签嵌入]
    C --> D{浏览器支持<object>标签?}
    D -- 是 --> E{浏览器支持<embed>标签?}
    E -- 是 --> F[使用<embed>标签方式播放]
    E -- 否 --> G[使用<object>标签方式播放]
    D -- 否 --> H{浏览器支持<embed>标签?}
    H -- 是 --> F
    H -- 否 --> I[提示不支持或下载插件]
    F --> J[结束]
    G --> J
    I --> J

综上所述，在网页中嵌入多媒体需要综合考虑多种因素，包括浏览器兼容性、用户体验和版权问题等。通过合理选择嵌入方式和提供多种媒体格式，可以最大程度地满足不同用户的需求。