如何使用 HTML 在网页中添加音频和视频？

在本文中，我们将讨论如何使用各种 HTML 方法在网页中添加音频和视频。在讨论添加音频和视频到网页的各种可用方法之前，我们应该了解各种音频和视频格式。

可用的各种音频格式有：

• MIDI (Musical Instrumental Digital Interface)
• WAV (Waveform Audio)
• MP3 或 MPEG (Motion Picture Experts Group)
• AIFF (Audio Interface File Formats)

可用的各种视频格式有：

• AVI (Audio/Video Interleaved)
• MOV (Quick Time)
• MPG 等。

将音频和视频包含到网页中有以下三种方式：

• 使用 <EMBED> 元素嵌入文件
• 使用 <OBJECT> 元素嵌入文件
• 使用 Audio 标签添加音频
• 使用 Video 标签添加视频
• 使用 <A> 元素链接

我们一一解释。

1. 使用 <EMBED> 元素嵌入文件： <EMBED> 元素用于将需要特殊插件或辅助应用程序（如音频、视频和 Flash 动画等）的文件包含到网页中。<EMBED> 元素同时被 Netscape Navigator 和 MS-Internet Explorer 支持，但未被其他任何浏览器支持。在使用 <EMBED> 元素时，必须包含 SRC 属性，并将值设置为您想要包含的音频/视频文件名。

例如

<EMBED SRC ="myvideo.mpg">

除了“SRC”属性，您还可以包含许多可选属性，例如：

• WIDTH：此属性用于指定对象的宽度。以像素为单位。
• HEIGHT：height 属性用于指定对象的高度。也以像素为单位。
• HIDDEN：此属性用于指定是否隐藏对象。可能的值为 TRUE 和 FALSE。
• ALIGN：用于指定对象的对齐方式。align 属性可能的值为 LEFT、RIGHT 和 Center。
• HSPACE：用于指定对象左右两侧的空间量。
• VSPACE：用于指定对象顶部和底部空间量。
• BORDER：顾名思义，border 属性用于指定对象边框的宽度。以像素为单位。
• AUTOSTART：此属性用于指定对象是否自动开始播放。可以为此属性分配的值为 TRUE（默认）和 FALSE。

例如

<EMBED SRC = "movie.mp4" AUTOSTART = "FALSE" HEIGHT = "20" WIDTH = "150">

编写一个程序来演示使用 <EMBED> 元素嵌入文件的工作原理。

解释：在上面的示例中，在网页浏览器中查看时，嵌入的音频文件将被下载，并且您可以在单击播放按钮时播放它。如果浏览器不支持 <embed> 元素，则会显示包含在 <noembed> 标签中的文本。

输出

以下是这个例子的输出。

2. 使用 <OBJECT> 元素嵌入文件： <OBJECT> 元素是用于将对象（文件）嵌入到网页中的标准元素。它是对现有 <EMBED> 元素的替代。除了音频和视频文件，它还可用于在您的页面中包含 ACTIVE-X 控件、文本、Java Applet 甚至一些视频文件和其他网页。<OBJECT> 元素就像一个空元素，但需要一个结束标签。

例如：为了使用 <OBJECT> 元素包含音频文件，我们将编写：

<OBJECT DATA = "song.mp4" type = "video/mpg">

DATA 属性告诉浏览器在哪里可以找到您想要嵌入的文件的位置，分配给此属性的值是将被嵌入文件的 URL。文件将被嵌入的 TYPE 及其 MIME 类型。可以分配给它的各种值包括 audio/basic（适用于所有）、audio/wav（适用于 .wav）、audio/mpeg（适用于 .mp3）、video/quicktime（适用于 .mov）、video/mpeg（适用于 .mpg）和 video/msvideo（适用于 .avi）等。

除了“DATA”和“TYPE”属性，您还可以包含许多可选属性，例如：

• WIDTH：此属性用于指定对象的宽度。以像素为单位。
• HEIGHT：height 属性用于指定对象的高度。也以像素为单位。
• AUTOSTART：此属性用于指定对象是否自动开始播放。可以为此属性分配的值为 TRUE（默认）和 FALSE。

编写一个程序来演示使用 <OBJECT> 元素嵌入文件的工作原理

解释：在上面的示例中，在网页浏览器中查看时，嵌入的音频文件将被下载并播放。

输出

以下是这个例子的输出。

3. 使用 Audio 标签添加音频：<audio> 标签用于直接将音频添加到 HTML 网页。<source> 与“src”属性一起用于向网页添加音频源。有关更多信息，请参阅 HTML Audio 标签。

编写一个程序来演示使用 <Audio> 标签添加音频的工作原理

解释：在上面的示例中，在网页浏览器中查看时，嵌入的音频文件将自动播放。controls 属性指定了正在播放的音频播放器的控件。<source> 标签属性“src”定义了音频文件的 URL。

输出

以下是这个例子的输出。

4. 使用 Video 标签添加视频：<video> 标签用于直接将视频添加到 HTML 网页。<source> 与“src”属性一起用于向网页添加视频源。有关更多信息，请参阅 HTML Video 标签。

编写一个程序来演示使用 <video> 标签添加视频的工作原理

解释：在上面的示例中，我们使用 <video> 标签添加了一个视频。

嵌入的视频文件将自动播放。视频的“controls”属性指定了正在播放的视频控件播放器。<source> 标签属性“src”定义了视频文件的 URL。

输出

以下是这个例子的输出。

5. 使用 <A> 元素链接： <A> 元素是将多媒体添加到网页的最可靠方法之一。正如您使用 <A> 元素链接 HTML 文件一样，您也可以使用它来链接音频和视频文件到网页。唯一需要更改的是 **HREF** 属性的值，它被赋为一个音频或视频文件名，而不是 HTML 文件。

例如：为了将音频文件“mysong.avi”添加到网页。我们只需在网页中包含以下代码。

<A HREF = "mysong.avi"> 播放歌曲 </A>

当用户在网页上单击“播放歌曲”链接时，文件 mysong.avi 将被下载到访问者计算机上，并使用插件应用程序自动播放。如果浏览器无法加载与文件对应的插件，则可以选择将所需插件下载到您的硬盘驱动器。类似地，您可以使用 <A> 元素将视频文件包含到网页中。

例如：为了将视频文件“myvideo.mpg”添加到网页。我们只需在网页中包含以下代码。

<A HREF = "myvideo.mpg"> 播放视频 </A>