![HTML5+CSS3+JavaScript从入门到精通(微课精编版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/699/24172699/b_24172699.jpg)
4.2 使用多媒体插件
插件是浏览器专用功能扩展模块,它增强了浏览器的对外接口能力,实现对多种媒体对象的播放支持。
4.2.1 使用<embed>标签
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P73_95419.jpg?sign=1739001707-zRoHAYSbD6YYhJqHZd1KylYxaL5S7pJm-0-5fe3b69d20645e6df866a3e9e5805b6d)
视频讲解
<embed>标签可以定义嵌入插件,以便播放多媒体信息。用法如下:
<embed src="helloworld.swf" />
src属性必须设置,用来指定媒体源。<embed>标签包含的属性说明如表4.1所示。
表4.1 <embed>标签属性
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-T73_170922.jpg?sign=1739001707-TjvOxEZUuGCUz6cKr7culxFUV8T3FWHL-0-4e410a1cd10e26d7eb928be93fb7ebdc)
【示例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所示。
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P73_95416.jpg?sign=1739001707-xhcVyDB4pH0PlVpd87nzEsYdiucbAkBH-0-dd326f88e4be59d52073831ee797e9ce)
图4.3 插入视频
4.2.2 使用<object>标签
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P74_95592.jpg?sign=1739001707-M3YBJsDDnaNzu8Cc40Nb8moXjrjzDPkX-0-65bfba2491db8193db6986e0b8706155)
视频讲解
使用<object>标签可以定义一个嵌入对象,主要用于在网页中插入多媒体信息,如图像、音频、视频、Java applets、ActiveX、PDF和Flash。
<object>标签包含大量属性,说明如表4.2所示。
表4.2 <embed>标签属性
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-T74_170924.jpg?sign=1739001707-tGHgcQLEM4gEYHJa3ViV4OkMX2hKw571-0-383fded8fcdc5d9b3d043b70ea839c6f)
【示例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>
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P74_95543.jpg?sign=1739001707-wRBeGvdqRKETkLFPEZ2mZ0TLHUBecMaN-0-4408fa328b690c05edab28b72d8d8c7e)
图4.4 嵌入图片
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P74_95544.jpg?sign=1739001707-F7cdSVptFMP9X0qwwAlvlnTT2Kk6dZht-0-6809c0f9be779046836177a63cb31574)
图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所示。
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P75_95607.jpg?sign=1739001707-jujYMmb19b0FDjttzqnWeiPlC10zmWkD-0-48bc20cf9f4c478137a9d8174cb1ca43)
图4.6 嵌入音频
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P75_95608.jpg?sign=1739001707-Xu0gni30WsoQGN9HOp9CQAU7DICMzcMs-0-82bf3abff0b5672bacffca2eb4fc1edd)
图4.7 嵌入Flash网站
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P75_1.jpg?sign=1739001707-NFm96k6c9SZkoX4W9loT0sZfkgMj2I34-0-9cbfc78fe58c8f3e284d229eff83916c)
object功能很强大,初衷是取代img和applet元素。不过由于漏洞以及缺乏浏览器支持,并未完全实现,同时主流浏览器都使用不同的代码来加载相同的对象。如果浏览器不能够显示object元素,就会执行位于<object>和</object>之间的代码,通过这种方式,我们针对不同的浏览器嵌套多个object元素,或者嵌套embed、img等元素。