![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=1739050246-TxCKFEGitrqGLrN2ztMbTZPWaNzcg56o-0-9c6bb3ce6ad0a75f5829b6904ec3310b)
视频讲解
<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=1739050246-UYAOcVdO4F7clvHH6BahDNFZt9Jwa2j5-0-7ff5cbc1ac154e94a41d72ca957d826e)
【示例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=1739050246-L0hRMhWSQYMBYeJspHsIFasxnZNBfUqr-0-46ed8bbfcf51cb7d491b9f03232d8781)
图4.3 插入视频
4.2.2 使用<object>标签
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P74_95592.jpg?sign=1739050246-VRQ3stmddug9cUgPnAp8ZGKPenGLLen4-0-2a8502326b44a2cdf0aff2ad3a1f0614)
视频讲解
使用<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=1739050246-PS1HLEikLPbdKHsuz8yEAaGUP7fGBfnQ-0-ee1bc6e891de3ffc728a376bfd9302f4)
【示例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=1739050246-P6ayoWvvPgF9BrBz4RQmxl0rxZTaVmiM-0-e6c7ff0434ed043e86b79969bf385815)
图4.4 嵌入图片
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P74_95544.jpg?sign=1739050246-OSU5ko8wlOaQIeZakf8jh6UXYwkGLPhN-0-b3e53ccf50cacb862961420a4f50efcd)
图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=1739050246-6gGaqUB9Z9dkL1KL5cITpujaIwAJj78g-0-96195b0e1fa34c98a6401bb9de62fbfa)
图4.6 嵌入音频
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P75_95608.jpg?sign=1739050246-JEtJk1zgKvOXQSS42zbXR1ndeNbknVXK-0-e3ba5ccdc6c1b059747386fd68634bdc)
图4.7 嵌入Flash网站
![](https://epubservercos.yuewen.com/32B511/13043253503832106/epubprivate/OEBPS/Images/Figure-P75_1.jpg?sign=1739050246-JKVoYd9m21Lvjkr1tZlag09TGsuoXD0v-0-f929c5de3308047802ed28aa31515d56)
object功能很强大,初衷是取代img和applet元素。不过由于漏洞以及缺乏浏览器支持,并未完全实现,同时主流浏览器都使用不同的代码来加载相同的对象。如果浏览器不能够显示object元素,就会执行位于<object>和</object>之间的代码,通过这种方式,我们针对不同的浏览器嵌套多个object元素,或者嵌套embed、img等元素。