《HTML5+CSS3+JavaScript网页设计与制作项目教程（》课件_项目3 图像与多媒体的应用——制作精彩的网页(1).pptx

1、HTML5+CSS3+JavaScript网页设计与制作项目教程项目3 图像与多媒体的应用制作精彩的网页目录E N T E R P R I S E O P E R A T I O N R E P O R T04.总结提升03.知识链接02.学习目标01.项目导入PART 01项目导入使用多媒体标签制作使用多媒体标签制作“旅行家旅行家欢迎欢迎”页面页面为了使我们的网页更加生动，可以在页面中加入多媒体元素，例如图像、音频及视频等。本章节我们将使用HTML5中的多媒体标签，为网站首页欢迎页面添加背景音乐，使网页不仅赏心悦目，并且声临其境。PART 02知 识 目 标能 力 目 标1、了解网页中常见的

2、多媒体格式2、了解浏览器对多媒体文件的支持情况 3、掌握标签、标签的使用方法4、掌握标签、标签的属性1、能够在网页中插入多媒体对象2、能够控制多媒体对象的显示效果PART 03一、网页中常见的多媒体格式（音频、视频）1、网页中常见的音频格式打开一个网站，自动播放的背景音乐能够让用户看到页面信息的同时，在听觉上得到享受，以此达到进一步传达网站的氛围的效果，使用户沉浸其中，得到更加丰富、多重的体验。网页中常见的音频格式有以下几种：（1）MP3格式（2）WMV格式（3）WMA格式（4）OGG格式1）MP3格式 MP3格式是一种采用有损压缩的音频文件格式，其压缩率可达到1:10。由于MP3格式格式的文

3、件体积小，音质较好，因此成为网络上常用的音频文件格式。（2）WMV格式WMV格式是微软公司开发的一种音频格式，具有高压缩率、文件体积小等优势。基本所有主流播放器都支持对WMV格式文件的播放。（3）WMA格式WMA格式是微软公司力推的一种音频文件格式，其压缩率可达1:18，音质与MP3文件相似。因此也是一种体积小，同时音质也不错的音频格式。（4）OGG格式OGG格式是一种先进的音频压缩格式，与MP3一样是一种有损压缩格式，但质量损失较少，音质与MP3格式的文件不相上下。同时具有支持多声道、可以不断改良文件大小和音质的特点。一、网页中常见的多媒体格式（音频、视频）（3）WMA格式WMA格式是微软公

4、司力推的一种音频文件格式，其压缩率可达1:18，音质与MP3文件相似。因此也是一种体积小，同时音质也不错的音频格式。（4）OGG格式OGG格式是一种先进的音频压缩格式，与MP3一样是一种有损压缩格式，但质量损失较少，音质与MP3格式的文件不相上下。同时具有支持多声道、可以不断改良文件大小和音质的特点。一、网页中常见的多媒体格式（音频、视频）一、网页中常见的多媒体格式（音频、视频）2、网页中常见的视频格式（1）MP4格式MP4格式是为了播放流式媒体的高质量视频而专门设计的，它通过视频压缩技术传输数据，使用最少的数据获得最佳的图像质量。（2）AVI格式AVI是Audio Video Interle

5、aved的缩写，是Windows操作系统中使用的视频文件格式。它的优点是兼容性好、图像质量好、调用方便，缺点是文件尺寸较大。（3）FLV格式FLV流媒体格式全称为Flash Video，它形成的文件极小、加载速度极快。FLV视频格式本身占有率低、视频质量良好、体积小的特点使它非常适合网络发展。一、网页中常见的多媒体格式（音频、视频）（4）MOV格式MOV格式是苹果公司创立的一种视频格式，初始阶段只能只支持MAC电脑ios系统，目前也支持Windows平台的，画质清晰，是一种优良的视频编码格式。（5）MKV格式MKV是一种常见的视频文件，它里面可以包含有音频和字幕，用MKV封装后的视频所占存储空

6、间小于AVI源文件。但是由于是民间格式，没有版权限制，所以官方发布的视频影片都不采用MKV格式。1.音频文件的嵌入 利用音频标签可以在网页中嵌入音频文件，在网页中进行加载和播放。标签的基本语法格式是：.src属性值为音频文件的地址，可以是绝对地址或相对地址。一对.标签内可编辑文字，作用是在不支持标签的浏览器中显示文字替代音频播放器。二、音频标签及其属性2.标签的属性（1）播放控件 在标签中定义controls属性可在网页中显示浏览器自带的播放器控件。无设置则播放器隐藏。使用方法如下：.二、音频标签及其属性（2）自动播放 在网页的实际应用中，有时需要在打开网页的同时播放音频，为满足这一需求，可在

7、标签中定义autoplay属性。如果设置属性为autoplay=autoplay或autoplay=ture，则音频在网页加载完成后马上播放；若无设置，则需通过播放器控件的开始按钮手动播放音频。基本格式如下：.二、音频标签及其属性（3）音频的循环播放 Loop属性用于定义是否循环播放音频。若设置属性为loop=loop或loop=true，则音频循环播放。基本格式如下：.二、音频标签及其属性【例3-1】在网页中播放音频文件，并设置为循环播放。循环播放音频文件 循环播放音频文件 您的浏览器不支持 audio文件的播放二、音频标签及其属性【例3-1】在网页中播放音频文件，并设置为循环播放。完成效果

8、如下图所示二、音频标签及其属性（4）音频数据的预加载 HTML5提供了preload属性用于设置音频数据是否进行预加载，即在页面加载后音频播放前，浏览器对音频数据先进行缓冲，以加快播放速度，从而提高页面的加载速度。preload属性有三个属性值，分别是auto、metadata及none，其中默认值为auto。preload属性的基本格式如下：.二、音频标签及其属性（5）设置可替换的音频文件 在标签中可以使用标签指定多个待播放的文件。基本格式如下：.二、音频标签及其属性 在HTML5中，使用标签定义视频播放器，其基本格式如下：.与标签的使用方法相同，在标签利用src属性设置视频文件的URL地址

9、，默认状态下不显示播放器，如需显示播放器，可以在标签内使用controls属性进行设置。同时，在未定义播放器高度与宽度的情况下，播放器视频窗口的高度与宽度等于视频文件的原始尺寸。三、视频标签及其属性 2.标签的属性（1）播放控件controls：在网页中显示播放器控件。无设置则视频无法正常播放。（2）自动播放autoplay：属性值为True或false。若值为true，视频在就绪后马上播放。此功能在IE浏览器中有效。（3）自定义视频的开始与结束start：属性值为数值。设置播放器在音频流中开始播放的位置。无设置则默认从开头播放。end：属性值为数值。设置播放在视频中的何处停止。无设置则默认播

10、放到结尾。三、视频标签及其属性 （4）视频的循环播放loop：属性值为True或false。若值为true，则视频会循环播放。基本格式如下：.loopstart：属性值为数值。设置视频循环播放的开始位置。无设置则默认为 start 属性的值。loopend：属性值为数值。设置视频中循环播放的停止位置，无设置则默认为end属性的值。playcount：属性值为数值。设置视频片断播放的次数。无设置则默认模仿次数为 1。三、视频标签及其属性 （5）播放器的高度与宽度height：属性值为数值（单位px）或相对于父级元素的百分数。设置播放器控件的高度。width：属性值为数值（单位px）或相对于父级元

11、素的百分数。设置播放器控件的宽度。三、视频标签及其属性 【例3-3】在网页中自动播放视频文件，设置视频播放窗口的尺寸。播放视频文件 播放视频文件 您的浏览器不支持 audio文件的播放 三、视频标签及其属性 【例3-3】在网页中自动播放视频文件，设置视频播放窗口的尺寸。完成效果如图三、视频标签及其属性 （5）显示视频图片poster：设置视频加载时或播放前显示的图片，也可以在视频地址错误或无效的情况下进行显示。基本格式如下：.三、视频标签及其属性【例3-4】利用标签设置图片，当视频无法播放时显示设置的图片。利用poster标签显示视频图片 利用poster标签显示视频图片 Your brows

12、er does not support the video tag.三、视频标签及其属性【例3-4】利用标签设置图片，当视频无法播放时显示设置的图片。完成效果如图三、视频标签及其属性（6）视频中的source元素 利用标签设置多种格式的备用视频文件，增加替换视频源。标签插入视频中的基本语法格式为：.三、视频标签及其属性PART 04HTML5 新增标签新增标签 标签用来定义一个容器，容器内可添加多媒体文件，包括图像、音频、视频等内容。标签的应用更为广泛，支持的多媒体格式也更多。基本语法格式为：标签的常用属性如下：src属性：设置要播放多媒体文件的URL。width属性：设置播放器的宽度。height属性：设置播放器的高度。type属性：定义嵌入内容的类型。一、标签【例3-6】利用 标签显示嵌入网页中的 MP3 文件。使用embed播放背景音乐 使用embed标签播放背景音乐 一、标签【例3-6】利用 标签显示嵌入网页中的 MP3 文件。完成效果如图一、标签