HTML5音频、Flash动画和FLV视频的添加和设置

使用Dreamweaver CC可以有效地将多媒体元素与网页其他元素有机地整合在一起，在网页中直接插入音频、视频和动画等多媒体元素，以制作出更加有声有色、富有美感的多媒体网页。

1.插入音频

对于广大网页设计者来说，如何能使自己的网站与众不同、充满个性，一直是他们不懈努力的目标。除了尽量提高页面的视觉效果、互动功能之外，如果能在打开网页的同时，响起一曲优美动人的音乐，相信会使网站增色不少。

在网页中可添加多种类型的音频文件格式，例如，mid、wav、aif、mp3、ra和ram等，不同类型的音频文件和格式有各自不同的特点。在确定添加的音频文件的格式之前，设计人员需要考虑一些因素，例如添加音频的目的、文件大小、音频品质和不同音频格式在不同浏览器中的差异。这些因素不同，添加音频到网页中时也需要采取不同的方法。

1）链接到音频文件

链接到音频文件是指音频文件作为页面上某种元素的超链接目标。链接到音频文件是将音频添加到网页的一种简单而有效的方法。这种集成音频文件的方法可以使用户能够选择是否收听该音频，只有单击了超链接且用户的计算机上安装了相应的播放器，才能收听音频。

在网页文档中选择要用作指向音频文件的链接的文本或图像后，在“属性”面板上单击“链接”文本框右侧的“浏览文件”按钮，在弹出的对话框中找到需要的音频文件并单击“确定”按钮，或者直接在“链接”文本框中输入文件的路径和名称，即可链接到相应的音频文档。保存文档，在浏览器中预览页面效果如图5.31所示，单击链接，会打开相应的媒体播放器播放指定的音频文件。

图5.31　在网页中添加声音

2）嵌入音频文件

嵌入音频文件可将音频直接集成到页面中，但只有在访问站点的计算机系统中具有所选音频文件的适当插件后，音频才可以播放。如果希望将音频用作背景音乐或希望对音频播放进行控制，就可以嵌入音频文件。

例如，在设计视图中，将插入点放置在要嵌入插件的位置，单击“插入”→“HTML”→“插件”菜单命令，打开“选择文件”对话框，从中选择一个音频文件并单击“确定”按钮后，在网页中将会添加一个插件图标。在插件的“属性”面板上的“宽”和“高”文本框中分别输入“500”和“300”，以确定音频插件在浏览器中显示的尺寸。单击“参数”按钮，弹出“参数”对话框，添加相应的参数设置，如图5.32所示，其中autostart参数值为true，则在打开网页的时候就会自动播放所嵌入的音频文件；设置LOOP参数的值为true，则在网页中将循环播放所嵌入的音频文件。保存页面，在浏览器中预览页面，可以看到音频播放的效果并且可以对音频的播放进行控制，如图5.33所示。

图5.32　设置“参数”对话框

图5.33　页面预览音频播放效果

3）插入HTML 5Audio

网络上有许多不同格式的音频文件，但HTML标签所支持的音频格式并不是很多，并且不同浏览器支持的格式也不相同。HTML 5针对这种情况，新增了＜audio＞标签来统一网页音频格式，可以直接使用该标签在网页中添加相应格式的音频。目前，HTML 5新增的HTML Audio元素所支持的音频格式主要是MP3、Wav和Ogg。

将光标置于网页中需要插入HTML 5Audio的位置，单击“插入”面板上的“HTML 5 Audio”按钮，即可在网页中插入HTML 5Audio，所插入的HTML 5Audio以图标的形式显示。选中设计视图中的HTML 5Audio图标，在“属性”面板上进行相关属性的设置，如图5.34所示。切换到代码视图中，可以看到所插入的HTML 5Audio相关的HTML代码为“＜audio controls autoplay＞＜source src＝"audio.mp3"type＝"audio/mp3"＞＜/audio＞”。保存页面，在浏览器中预览页面，可以看到使用HTML 5Audio所实现的音频播放效果，如图5.35所示。

图5.34　设置HTML 5Audio的属性

图5.35　页面预览HTML 5音频播放效果

2.插入Flash对象

Flash技术是实现和传递基于矢量的图形和动画的首选解决方案。Dreamweaver CC附带可以使用的Flash对象，使用这些对象可以在Dreamweaver文档中插入Flash动画及视频。

1）添加SWF文件

SWF文件是使用Flash制作的动画文件，是FLA文件的编译文本，可在浏览器中播放并在Dreamweaver中进行预览。插入到Dreamweaver文档中的Flash动画在文档编辑区中显示的是Flash占位符，用户可以在浏览器中浏览动画。

要插入Flash动画，在确定了插入点所在的位置后，可单击“插入”面板上的“Flash SWF”按钮，打开“选择SWF”对话框，从中选择要插入的SWF文件，单击“确定”按钮后，即会在文档中插入一个SWF文件占位符。选中插入的SWF占位符，在“属性”面板上设置其大小、播放方式、对齐方式和背景颜色等相关属性（图5.36）。预览Flash动画播放效果如图5.37所示。

图5.36　Flash动画的“属性”面板(www.xing528.com)

图5.37　预览Flash动画播放效果

2）添加FLV文件

FLV是Adobe公司发布的一种高压缩比、可调节清晰度的流媒体视频格式，由于其基于Flash技术，因此FLV文件又被称为Flash视频。使用Dreamweaver CC，用户可以方便地将FLV格式的视频插入到网页中。

确定插入点所在位置后，单击“插入”面板上的“Flash Video”按钮，弹出“插入FLV”对话框（图5.38），在“URL”文本框中输入FLV文件的地址，在“外观”下拉列表中选择播放器外观，在“视频类型”下拉列表中选择视频类型。

图5.38　“插入FLV”对话框

其中，若选择“累进式下载视频”，则将FLV文件下载到站点访问者的硬盘上，然后播放。与传统的下载并播放的视频传送方法不同，累进式下载允许用户在下载的过程中播放视频已下载的部分。若选择“流视频”，则对Flash视频内容进行流式处理，并在一段很短时间的缓冲（可确保流畅播放）之后在Web页上播放该内容。

在完成设置后，设计视图中将会出现一个带有Flash Video图片的灰色方框，该方框的位置就是插入的FLV文件的位置。

保存页面并预览效果（图5.39），可以发现一个生动的多媒体视频显示在网页中。当鼠标经过该视频时，将显示播放控制条；反之，当离开该视频时，则隐藏播放控制。

图5.39　预览Flash视频播放效果

3.插入视频

使用Dreamweaver CC不仅可以在网页中添加音频文件，还可以向网页中插入视频文件，网页中常用的视频文件主要有MPEG、AVI、WMV、RM和MOV等多媒体格式。

1）嵌入视频文件

制作网页时可以将视频文件直接插入到页面中，插入后可以在页面上显示视频播放器的外观，其中包括播放、暂停、停止、音量及声音文件的开始点和结束点等控制按钮。

将光标移至网页中需要插入视频的位置上，单击“插入”面板上的“插件”按钮，弹出“选择文件”对话框，选择“movie.avi”视频文件并单击“确定”按钮后即可插入，插入后的插件并不会在设计视图中显示内容，而是显示插件的图标。选择插件图标，在“属性”面板中可以对其高度、宽度和播放参数等进行如图5.40所示的设置。保存页面，在浏览器中预览页面，可以看到视频播放的效果，如图5.41所示。

图5.40　设置插件的属性

图5.41　页面预览视频播放效果

2）插入HTML 5Video

以前在网页中插入视频都是通过插入插件或者是插入Flash视频的方式，而Flash视频需要在浏览器中安装了Flash播放插件才可以正常播放。HTML 5新增了＜Video＞标签，可以直接在网页中嵌入视频文件而不需要任何插件。目前HTML 5新增的HTML Video元素所支持的视频格式主要是MP4、WebM和Ogg。

将光标移至网页中需要插入HTML 5Video的位置，单击“插入”面板上的“HTML 5 Video”按钮，即可在网页中插入HTML 5Video，所插入的HTML 5Video以图标的形式在设计视图中显示。选中设计视图中的HTML 5Video图标，在“属性”面板上进行相关属性的设置，如图5.42所示。切换到代码视图中，可以看到所插入的HTML 5Video相关的HTML代码为“＜video width＝"800"height＝"600"controls autoplay＞＜source src＝"memory.mp4"type＝"video/mp4"＞＜/video＞”。保存页面，在浏览器中预览页面，可以看到使用HTML 5Video所实现的视频播放效果，如图5.43所示。

图5.42　设置HTML 5Video的属性

图5.43　页面预览HTML 5Video播放效果