第12章在网页中插入多媒体元素

1、随着HTML5的发展和推广，HTMl5在网页中的应用越来越多，在网页中通过使用HTML5可以实现许多特效。Adobe公司顺应网页发展的趋势，推出了HTML5动画可视化开发软件Adobe Edge Animate，通过使用该软件，可以不需要编写繁琐的代码即可开发出基于HTML5的动画。 Dreamweaver CC为了适应HTML5的发展趋势，在“插入”面板的“媒体”选项卡中新增了“插入Edge Animate作品”按钮，通过使用该功能可以轻松的将使用Adobe Edge Animate软件开发的HTML5动画插入到网页中。课堂案例课堂案例制作广告展示页面制作广告展示页面课堂案例：制作广告展示页

2、面最终文件：光盘最终文件第12章12-1.html视频：光盘视频第12章12-1.swf12.2.1HTML 5所支持的视频文件格式所支持的视频文件格式目前，HTML 5新增的HTML Video元素所支持的视频格式主要是MPEG4、WebM和Ogg，12.2.2插入插入HTML 5 Video视频标签的出现无疑是HTML5的一大亮点，但是旧的浏览器不支持HTML5 Video，并且，涉及到视频文件的格式问题，Firefox、Safari和Chrome的支持方式并不相同，所以，在现阶段要想使用HTML 5的视频功能，浏览器兼容性是一个不得不考虑的问题。将光标置于网页中需要插入HTML5 Vid

3、eo的位置，单击“插入”面板“媒体”选项卡中的HTML 5 Video按钮，即可在网页中光标所在位置插入HTML 5视频，所插入的HTML 5视频以图标的形式显示，转换到代码视图中，可以看到所插入的HTML 5视频的HTML代码。以前在网页中插入视频都是通过插件的方式或者是插入Flash Video，Flash Video视频需要浏览器安装Flash播放插件才可以正常播放。在HTML 5中新增了标签，通过使用标签，可以直接在网页中嵌入视频文件不需要任何的插件。课堂案例课堂案例制作制作HTML5视频页面视频页面课堂案例：制作HTML5视频页面最终文件：光盘最终文件第12章12-2-2.html视

4、频：光盘视频第12章12-2-2.swf12.2.3设置设置HTML 5 Video属性属性单击选中在网页中插入的HTML 5 Video图标，在“属性”面板中可以对HTML 5 Video的相关属性进行设置。ID：该选项用于设置HTML 5 Video元素的id名称。Class：在该选项的下拉列表中可以选择相应的类CSS样式为其应用。W和H：W属性用于设置HTML 5 Video的宽度。H属性用于设置HTML5 Video的高度。源：该选项用于设置HTML 5 Video元素的源视频文件，可以单击该选项文本框后的“浏览”按钮，在弹出的对话框中选择所需要的视频文件。Poster：该选项用于设置

5、在视频开始播放之前需要显示的图像，可以单击该选项文本框之后的“浏览”按钮，选择相应的图像设置为视频播放之前所显示的图像。Title：该选项用于设置HTML 5 Video在浏览器中当鼠标移至该对象上时所显示的提示文字。回退文本：该选项用于设置当浏览器不支持HTML 5 Video元素时所显示的文字内容。Controls：选中该复选项，可以在网页中显示视频播放控件。Loop：选中该复选框，可以设置视频循环播放。AutoPlay：选中该复选框，可以在打开网页的同时自动播放该视频。Muted：选中该复选框，可以设置视频在默认情况下静音。Preload：该属性用于设置是否在打开网页时自动加载视频，如果

6、选中Autoplay复选框，则忽略该选项设置。在该选项的下拉列表中包含3个选项，分别是none、auto和metadata，如果设置Preload选项为none，则当页面加载后不载入视频。如果设置Preload选项为auto，则当页面加载后载入整个视频；如果设置Preload选项为metadata，则当页面加载后只需载入视频元数据。网络上有许多不同格式的音频文件，但HTML标签所支持的音乐格式并不是很多，并且不同的浏览器支持的格式也不相同。HTML 5针对这种情况，新增了标签来统一网页音频格式，可以直接使用该标签在网页中添加相应格式的音乐。12.3.1HTML5所支持的音频文件格式所支持的音频

7、文件格式目前，HTML5新增的HTML Audio元素所支持的音频格式主要是MP3、Wav和Ogg。12.3.2插入插入HTML5 Audio将光标置于网页中需要插入HTML 5 Audio的位置，单击“插入”面板“媒体”选项卡中的HTML 5 Audio按钮，即可在网页中光标所在位置插入HTML 5音频，所插入的HTML 5音频以图标的形式显示，转换到代码视图中，可以看到所插入的HTML 5音频的HTML代码。课堂案例课堂案例制作制作HTML5音频页面音频页面课堂案例：制作HTML5音频页面最终文件：光盘最终文件第12章12-3-2.html视频：光盘视频第12章12-3-2.swf12.3

8、.3设置设置HTML5 Audio属性属性单击选中在网页中插入的HTML 5 Audio图标，在“属性”面板中可以对HTML 5 Audio的相关属性进行设置。ID：该选项用于设置HTML 5 Audio元素的id名称。Class：在该选项的下拉列表中可以选择相应的类CSS样式为其应用。源：该选项用于设置HTML 5 Audio元素的源音频文件，可以单击该选项文本框后的“浏览”按钮，在弹出的对话框中选择所需要的音频文件。Title：该选项用于设置HTML 5 Audio在浏览器中当鼠标移至该对象上时所显示的提示文字。回退文本：该选项用于设置当浏览器不支持HTML 5 Audio元素时所显示的文

9、字内容。Controls：选中该复选项，可以在网页中显示音频播放控件。Loop：选中该复选框，可以设置音频重复播放。AutoPlay：选中该复选框，可以在打开网页的同时自动播放音乐。Muted：选中该复选框，可以设置音频在默认情况下静音。Preload：该属性用于设置是否在打开网页时自动加载音频，如果选中AutoPlay复选框，则忽略该选项设置。在该选项的下拉列表中包含3个选项，分别是none、auto和metadata。各选项的功能与HTML 5 Video的“属性”面板中的Preload属性下拉列表中选项的功能相同。Alt源1：该选项用于设置第2个HTML 5 Audio元素的源音频文件。

10、Alt源2：该选项用于设置第3个HTML 5 Audio元素的源音频文件。Flash是Adobe公司推出的网页动画软件，利用它可以制作出文件体积小，效果精美的矢量动画。目前flash动画是网络上最流行、最实用的动画格式。在网页制作中会使用大量的flash动画。12.4.1插入插入Flash动画动画由于Flash动画能够增强网页的动态画面感，又能够实现交互的功能，所以Flash动画被广泛应用于网站页面中，下面就通过一个小练习向读者介绍如何在网页中插入Flash动画。12.4.2设置设置Flash动画属性动画属性选中插入到页面中的Flash动画，在“属性”面板中可以对Flash的相关属性进行设置。

11、课堂案例课堂案例制作制作Flash欢迎页面欢迎页面课堂案例：制作Flash欢迎页面最终文件：光盘最终文件第12章12-4-1.html视频：光盘视频第12章12-4-1.swf12.4.3插入插入Flash Video FLV是随着Flash系列产品推出的一种流媒体格式， 使用Dreamweaver CC和FLV文件可以快速将视频内容放置在Web上，将FLV文件拖动到Dreamweaver CC中可以将视频快速地融入网站的应用程序。12.4.4“插入插入FLV”对话框对话框单击“插入”面板“媒体”选项卡中的Flash Video按钮，弹出“插入FLV”对话框，在该对话框中可以浏览到需要插入的F

12、lash Video视频，并且可以对相关选项进行设置。课堂案例课堂案例在网页中插入在网页中插入FLV视频视频课堂案例：在网页中插入FLV视频最终文件：光盘最终文件第12章12-4-3.html视频：光盘视频第12章12-4-3.swf 为网页添加背景音乐，可以突出网页的主题氛围，但同时也会增加网页的容量，增加下载的时间。网页中支持的音乐格式有多种，并且添加背景音乐的方法也有多种，本节中将向读者介绍如何为网页添加背景音乐。12.5.1网页中常用的音频格式网页中常用的音频格式网页中常用的音乐格式主要包括以下几种。1MIDI或MID MIDI是Musical Instrument Digital I

13、nterface的简写，中文译为“乐器数字接口”，是一种乐器的声音格式。它能够被大多数浏览器支持，并且不需要插件。尽管其声音品质非常好，但根据浏览者声卡的不同，声音效果也会不同。很小的MIDI文件也可以提供较长时间的声音剪辑。MIDI文件不能被录制并且必须使用特殊硬件和软件在计算机上合成。2WAV WAV是Waveform Extension简写，译为“WAV扩展名”，这种格式的文件具有较好的声音质量，能够被大多浏览器支持，不需要插件。用户可以使用CD、磁带、麦克风来录制声音，但文件通常较大，限制了可以在网页上使用的声音剪辑长度。3AIF AIF是Audio InterchangeFile F

14、ormat的简写，译为“音频交换文件格式”，这种格式也具有较高的声音质量，和WAV相似。4MP3 MP3是Motion Picture Experts Group Audio或MPEG-Audio Layer-3的简写，译为“运动图像专家组音频”，这是一种压缩格式的声音，可以令声音文件相对与WAV格式明显缩小，其声音品质非常好。MP3技术使用户可以对文件进行“流式处理”，以便浏览者不必等待整个文件下载完成就可以收听该文件。5RA或RAM、RPM和Real Audio 这种格式具有非常高的压缩程度，文件大小要小于MP3。全部歌曲文件可以在合理的时间范围内下载。因为可以在普通的Web服务器上对这些

15、文件进行“流式处理”，所以浏览者在文件没有下载完之前就可以听到声音，前提是浏览者必须下载并安装RealPlayer辅助应用程序。12.5.2使用使用标签添加背景音乐标签添加背景音乐在HTML语言中提供了标签，该标签就是为了实现网页的背景音乐而提供的，使用该标签可以非常方便的为网页添加背景音乐。12.5.3使用插件嵌入音频使用插件嵌入音频 在Dreamweaver CC中制作网页时，可以将音频嵌入到页面中，在页面中嵌入音频可以在页面上显示播放器的外观，包括播放、暂停、停止、音量及声音文件的开始和结束等控制按钮。课堂案例课堂案例为网页添加为网页添加背景音乐背景音乐课堂案例：为网页添加背景音乐最终文

16、件：光盘最终文件第12章12-5-2.html视频：光盘视频第12章12-5-2.swf课堂案例课堂案例在网页中嵌在网页中嵌入音频入音频课堂案例：在网页中嵌入音频最终文件：光盘最终文件第12章12-5-3.html视频：光盘视频第12章12-5-3.swf在Dreamweaver中，制作网页时可以将视频直接插入到页面中，在页面中插入视频可以在页面上显示播放器外观，包括播放、暂停、停止、音量及声音文件的开始点和结束点等控制按钮，12.6.1网页中常用视频格式网页中常用视频格式网页中常用的视频主要包括以下几种格式。1MPEG或MPG MPEG中文译为“运动图像专家组”，是一种压缩比率较大的活动图像

17、和声音的视频压缩标准，它也是VCD光盘所使用的标准.2AVI AVI是一种Microsoft Windows操作系统使用的多媒体文件格式。3WMVWMV是一种Windows操作系统自带的媒体播放器 Windows Media Player所使用的多媒体文件格式。4RM RM是Real公司推广的一种多媒体文件格式，具有非常好的压缩比率，是网络传播中应用最广泛的格式之一。5MOV MOV是Apple公司推广的一种多媒体文件格式。12.6.2插入视频插入视频在网页中不仅可以添加背景音乐，还可以向网页中插入视频文件，前面已经介绍了在网页中插入FLV格式的视频文件，接下来将向读者介绍如何在网页中插入其他格式的视频文件。课堂案例课堂案例在网页中嵌入普通视频在网页中嵌入普通视频课堂案例：在网页中嵌入普通视频最终文件