HTML - 嵌入多媒体


有时您需要将音乐或视频添加到网页中。向网站添加视频或声音的最简单方法是包含名为<embed>的特殊 HTML 标记。此标记使浏览器本身自动包含多媒体控件,前提是浏览器支持 <embed> 标记和给定的媒体类型。

您还可以为无法识别 <embed> 标记的浏览器添加<noembed>标记。例如,您可以使用 <embed> 显示您选择的电影,如果浏览器不支持 <embed> 标记,则可以使用<noembed>显示单个 JPG 图像。

例子

这是一个播放嵌入式 MIDI 文件的简单示例 -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <embed src = "/html/yourfile.mid" width = "100%" height = "60" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

<embed> 标签属性

以下是可与 <embed> 标记一起使用的重要属性列表。

注意- HTML5 中不推荐使用对齐自动启动属性。不要使用这些属性。

先生编号 属性及描述
1

对齐

确定如何对齐对象。它可以设置为 center、left 或 right

2

自动启动

此布尔属性指示媒体是否应自动启动。您可以将其设置为 true 或 false。

3

环形

指定声音是否应连续播放(将循环设置为 true)、一定次数(正值)或根本不播放(false)

4

播放计数

指定播放声音的次数。如果您使用 IE,这是循环的替代选项。

5

指定多媒体对象是否应显示在页面上。假值表示否,真值表示是。

6

宽度

对象的宽度(以像素为单位)

7

高度

对象的高度(以像素为单位)

8

姓名

用于引用对象的名称。

9

源代码

要嵌入的对象的 URL。

10

体积

控制声音的音量。可以从 0(关闭)到 100(全音量)。

支持的视频类型

您可以在嵌入标记内使用各种媒体类型,例如 Flash 影片 (.swf)、AVI (.avi) 和 MOV (.mov) 文件类型。

  • .swf 文件- 是由 Macromedia 的 Flash 程序创建的文件类型。

  • .wmv 文件- 是 Microsoft 的 Window 媒体视频文件类型。

  • .mov 文件- 是 Apple 的 Quick Time Movie 格式。

  • .mpeg 文件- 是由运动图像专家组创建的电影文件。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>

   <body>
      <embed src = "/html/yourfile.swf" width = "200" height = "200" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

这将产生以下结果 -

背景音频

您可以使用 HTML <bgsound>标签在网页背景中播放配乐。仅 Internet Explorer 支持此标记,大多数其他浏览器都会忽略此标记。当用户首次下载并显示主机文档时,它会下载并播放音频文件。每当用户刷新浏览器时,背景声音文件也会重播。

注意- bgsound 标签已被弃用,并且应该在 HTML 的未来版本中删除。所以不应该使用它们,建议使用 HTML5 标签音频来添加声音。但仍然出于学习目的,本章将详细解释 bgsound 标签。

该标签只有两个属性Loopsrc。这两个属性具有与上面解释的相同的含义。

这是一个播放小 MIDI 文件的简单示例 -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <bgsound src = "/html/yourfile.mid">
         <noembed><img src = "yourimage.gif" ></noembed>
      </bgsound>
   </body>
	
</html>

这将产生空白屏幕。该标签不显示任何组件并保持隐藏状态。

Internet Explorer 还只能处理三种不同的声音格式文件:wav,PC 的本机格式;au,大多数 Unix 工作站的本机格式;MIDI,一种通用音乐编码方案。

HTML 对象标签

HTML 4 引入了<object>元素,它为通用对象包含提供了通用解决方案。<object>元素允许 HTML 作者指定用户代理呈现对象所需的一切

这里有一些例子 -

示例 - 1

您可以将 HTML 文档嵌入 HTML 文档本身,如下所示 -

<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
   alt : <a href = "data/test.htm">test.htm</a>
</object>

如果浏览器不支持object标签,这里alt属性就会出现。

示例 - 2

您可以将 PDF 文档嵌入 HTML 文档,如下所示 -

<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
   alt : <a href = "data/test.pdf">test.htm</a>
</object>

示例 - 3

您可以使用<param>标签指定一些与文档相关的参数。这是嵌入 wav 文件的示例 -

<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
   <param name = "src" value = "data/test.wav">
   <param name = "autoplay" value = "false">
   <param name = "autoStart" value = "0">
   alt : <a href = "data/test.wav">test.wav</a>
</object>

示例 - 4

您可以添加 Flash 文档,如下所示 -

<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin" 
   codebase = "someplace/swflash.cab" width = "200" height = "300">
   
   <param name = "movie" value = "flash/penguin.swf" />
   <param name = "quality" value = "high" />
   <img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>

示例 - 5

您可以将 java applet 添加到 HTML 文档中,如下所示 -

<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" 
   width = "200" height = "200">
   <param name = "code" value = "applet.class">
</object>

classid属性标识要使用Java 插件版本。您可以使用可选的codebase属性来指定是否以及如何下载 JRE。