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

《第12章 在网页中插入多媒体元素》由会员分享，可在线阅读，更多相关《第12章 在网页中插入多媒体元素（15页珍藏版）》请在金锄头文库上搜索。

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.swf 12.2.1 HTML 5所支持的视频文件格式 目前，HTML 5新增的HTML Video元素所支持的视频格式主要是MPEG4 、WebM和Ogg， 12.2.2 插入HTML 5 Video 视频标签的出现无疑是HTML5的一大亮点，但是旧的浏览器不支持 HTML5 Video，并且，涉及到视频文件的格式问题，Firefox、Safari和 Chrome的支持方式并不相同，所以，在现阶段要想使用HTML 5的视 频功能，浏览器兼容性是一个不得不考虑的问题。 将光标置于网页中需要插入HTML5 Video的位

3、置，单击“插入”面板“媒体” 选项卡中的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.swf 12.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.

7、3.1 HTML5所支持的音频文件格式 目前，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

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

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

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

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

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

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

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

15、歌曲 文件可以在合理的时间范围内下载。因为可以在普通的Web服务器上对这 些文件进行“流式处理”，所以浏览者在文件没有下载完之前就可以听到声 音，前提是浏览者必须下载并安装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中文译为“运动图像专家组”，是一种压缩比率较大的活动图像和 声音的视频压缩标准，它也是VCD光盘所使用的标准. 2AVI AVI是一种Microsoft Windows操作系统使用的多媒体文件格式。 3WMV WMV是一种Windows操作系统自带的媒体播放器