4.2　使用多媒体插件

插件是浏览器专用功能扩展模块，它增强了浏览器的对外接口能力，实现对多种媒体对象的播放支持。

4.2.1　使用<embed>标签

视频讲解

<embed>标签可以定义嵌入插件，以便播放多媒体信息。用法如下：

    <embed src="helloworld.swf" />

src属性必须设置，用来指定媒体源。<embed>标签包含的属性说明如表4.1所示。

表4.1　<embed>标签属性

【示例1】设计背景音乐。打开本小节备用练习文档test1.html，另存为test2.html。在<body>标签内输入下面代码：

    <embed src="images/bg.mp3" width="307" height="32" hidden="true" autostart="true" loop="infinite"></embed>

指定背景音乐为"images/bg.mp3"，通过hidden="true"属性隐藏插件显示，使用autostart="true"设置背景音乐自动播放，使用loop="infinite"设置背景音乐循环播放。设置完毕属性，在浏览器中浏览，这时就可以边浏览网页，边听着背景音乐播放的小夜曲。

　提示：要正确使用，需要浏览器支持对应的插件。

【示例2】也可以播放视频。新建test3.html，在<body>标签内输入下面代码：

    <embed src="images/vid2.avi" width="413" height="292"></embed>

使用width和height属性设置视频播放窗口的大小，在浏览器中浏览效果如图4.3所示。

图4.3　插入视频

4.2.2　使用<object>标签

视频讲解

使用<object>标签可以定义一个嵌入对象，主要用于在网页中插入多媒体信息，如图像、音频、视频、Java applets、ActiveX、PDF和Flash。

<object>标签包含大量属性，说明如表4.2所示。

表4.2　<embed>标签属性

【示例1】下面代码使用<object>标签在页面中嵌入一幅图片，效果如图4.4所示。

    <object width="100%" type="image/jpeg" data="images/1.jpg"></object>

【示例2】下面代码使用<object>标签在页面中嵌入网页，效果如图4.5所示。

    <object type="text/html" height="100%" width="100%" data="https://www.baidu.com/"></object>

图4.4　嵌入图片

图4.5　嵌入网页

【示例3】下面代码使用<object>标签在页面中嵌入音频，效果如图4.6所示。

    <object width="100%"  classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
        <param name="AutoStart" value="1" />
        <param name="FileName" value="images/bg.mp3" />
    </object>

　提示：<param>标签必须包含在<object>标签内，用来定义嵌入对象的配置参数，通过名／值对属性来设置，name属性设置配置项目，value属性设置项目值。

【示例4】下面代码演示了如何使用<object>标签在页面中嵌入一个Flash网站，效果如图4.7所示。

图4.6　嵌入音频

图4.7　嵌入Flash网站

object功能很强大，初衷是取代img和applet元素。不过由于漏洞以及缺乏浏览器支持，并未完全实现，同时主流浏览器都使用不同的代码来加载相同的对象。如果浏览器不能够显示object元素，就会执行位于<object>和</object>之间的代码，通过这种方式，我们针对不同的浏览器嵌套多个object元素，或者嵌套embed、img等元素。

上一章目录下一章