3.8 在网页中插入插件
插件是浏览器专用功能扩展模块，它增强了浏览器的对外接口能力，实现对多种媒体对象的播放支持。一般浏览器允许第三方开发者根据插件标准将它们的产品融进网页，比较典型的如RealPlayer和QuickTime插件。
3.8.1 实战演练：设计背景音乐
视频讲解
音乐是多媒体网页的重要组成部分。由于音频文件存在不同类型和格式，也有不同的方法将这些声音添加到网页中。在决定添加音频格式和方式之前，需要考虑的因素包括用途、格式、文件大小、声音品质和浏览器差别等。不同浏览器对于声音文件的处理方法是非常不同的，彼此之间很可能不兼容。
【操作步骤】
第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。
第2步，在编辑窗口中，将光标定位在要插入插件的位置。
第3步，选择【插入】|【媒体】|【插件】命令，打开【选择文件】对话框。
第4步，在对话框中选择要插入的插件文件，这里选择images/bg.mp3，单击【确定】按钮，这时在Dreamweaver编辑窗口中会出现插件图标，如图3.27所示。
图3.27 插入的插件图标
第5步，选中插入的插件图标，可以在属性面板中详细设置其属性，如图3.28所示。
图3.28 插件属性面板
☑ 【插件名称】文本框：设置插件的名称，以便在脚本中能够引用。
☑ 【宽】和【高】文本框：设置插件在浏览器中显示的宽度和高度，默认以像素为单位。
☑ 【源文件】文本框：设置插件的数据文件。单击【选择文件】按钮
，可查找并选择源文件，或者直接输入文件地址。
☑ 【对齐】下拉列表：设置插件和页面的对齐方式。
☑ 【插件URL】文本框：设置包含该插件的地址。如果在浏览者的系统中没有装该类型的插件，则浏览器从该地址下载它。如果没有设置【插件URL】文本框，且又没有安装相应的插件，则浏览器将无法显示插件。
☑ 【垂直边距】和【水平边距】文本框：设置插件的上、下、左、右与其他元素的距离。
☑ 【边框】文本框：设置插件边框的宽度，可输入数值，单位是像素。
☑ 【播放】按钮：单击该按钮，可在Dreamweaver CC编辑窗口中预览这个插件的效果，单击【播放】按钮后，该按钮变成【停止】按钮，单击则停止插件的预览。
☑ 【参数】按钮：单击可打开【参数】对话框，设置参数对插件进行初始化。
第6步，因为是背景音乐，因此不需要插件控制界面，同时应该让背景音乐自动播放，且能够循环播放。单击【参数】按钮，打开【参数】对话框，设置如下3个参数，如图3.29所示。
图3.29 设置插件显示和播放属性
第7步，单击【确定】按钮关闭对话框，然后切换到【代码】视图，可看到生成如下代码：
<embed src="images/bg.mp3" width="307" height="32" hidden="true" autostart="true" loop= "infinite"> </embed>
第8步，属性设置完毕，按F12键在浏览器中浏览，这时可以边浏览网页，边听着播放的背景音乐。
3.8.2 实战演练：插入音频
视频讲解
在网页中使用的音频格式比较多，常用的包括MIDI、WAV、AIF、MP3和RA等。很多浏览器不用插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RA格式的声音文件则需要专门插件支持浏览器才能播放。
插入音频的方法有两种：一种是链接声音文件，一种是嵌入声音文件。链接声音文件比较简单，但使用比较快捷有效，同时可以使浏览者能够选择是否要收听该文件，并且使文件可应用于最广范围的观众中。
链接声音文件首先选择要用来指向声音文件链接的文本或图像，然后在属性面板的【链接】文本框中输入声音文件地址，或者单击后面【选择文件】按钮
选择文件，如图3.30所示。
图3.30 在属性面板中链接声音文件
嵌入声音文件是将声音直接插入页面中，但只有浏览器安装了适当插件后才可以播放声音，具体方法可以参阅3.8.1节的讲解。
在浏览器中预览上面示例，演示效果如图3.31所示。
图3.31 在浏览器中播放音频效果
3.8.3 实战演练：插入视频
视频讲解
网络视频格式也很多，常用的包括MPEG、AVI、WMV、RM和MOV等。插入视频的方法也包括链接视频文件和嵌入视频文件两种，使用方法与插入声音的方法相同。
☑ 链接视频文件。在属性面板的【链接】文本框中输入视频文件地址，按F12键打开浏览器浏览效果时，当把鼠标指针放在链接文字上时将立即变成手形，单击将播放视频，或者右击，在弹出的快捷菜单中选择【目标另存为】命令，将视频文件下载至本地，然后再播放。
☑ 嵌入视频文件。可以将视频直接插入页面中，选择【插入】|【媒体】|【插件】命令，打开【选择文件】对话框，然后选择要播放的视频，如图3.32所示。
图3.32 插入视频
提示：只有浏览器安装了所选视频文件的插件才能够正常播放。
在HTML中，不管插入音频还是视频文件，使用的标记代码和设置方法相同，详细设置如下。
☑ 链接法代码
<a href=" images/vid2.avi">观看视频</a>
☑ 嵌入法代码
<embed src=" images/vid2.avi" width="339" height="339">