《网页制作案例教程（HTML5+CSS3)》 课件 项目7--9 多媒体元素、 表单的应用、 CSS高级选择器.pptx

HTML5CSS3项目7多媒体元素网页制作案例教程（HTML5+CSS3）

教学目标了解HTML5支持的音频和视频格式1了解掌握熟练2掌握HTML5中音频的相关属性能够使用音频、视频标签在页面中添加音视频4掌握3掌握HTML5中视频的相关属性

1audio标记2video标记3source标记4制作“改革开放四十周年”网页任务分解

01audio标记PART01

audio标记音频audio是音频标记，用于在网页中添加音频，支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式，可以使用的音频格式有MP3、Wav、Ogg等。基本语法格式audio属性名=“属性值”/audio

audio标记属性名功能src音频的路径controls显示播放控件autoplay自动播放loop循环播放muted静音播放在audio标记中，常用的属性有src、controls、autoplay、loop等，其主要功能如表所示：

audio标记bodyaudiosrc=./music/一起向未来.mp3controls=controlsautoplay=autoplay/audio/body动手实践demo1

audio标记背景音乐audiosrc=./music/一起向未来.mp3autoplay=autoplayloop=loop/audio如果在导入音频时，不使用controls属性显示播放控件，只使用autoplay和loop属性实现自动循环播放，此时导入的音频类似于背景音乐，在网页打开后不显示播放控件，自动播放音频。

02video标记网页制作案例教程（HTML5+CSS3）PART02

video标记视频video是视频标记，用于在网页中添加视频，支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式，可以使用的视频格式有MP4、WebM、Ogg等。基本语法格式如下：基本语法格式video属性名=“属性值”/video

video标记属性名功能src视频的路径controls显示播放控件autoplay自动播放loop循环播放muted静音播放在video标记中，常用的属性有src、controls、autoplay、loop等，其主要功能如表所示：

video标记bodyvideosrc=./video/一起向未来.mp4controls=controlsautoplay=autoplaymuted=mutedloop=loop/video/body页面插入视频效果动手实践demo2

03source标记PART03

source标记不同浏览器对音频的支持浏览器MP3WavOggInternetExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESYESNOOperaYESYESYES

source标记浏览器MP4WebMOggInternetExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESNONOOperaYESYESYES不同浏览器对视频的支持

source标记sourcesource标记为媒体元素（比如video和audio）定义媒体资源。source标签允许规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。基本语法格式audio属性名=“属性值”source属性名=“属性值”source属性名=“属性值”/audiovideo属性名=“属性值”source属性名=”属性值”source属性名=“属性值”/video

source标记属性名功能src音/视频的路径type用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式在source标记中，常用的属性有src、type等，其主要功能如表所示：

source标记bodyvideocontrolssourcesrc=./video/一起向未来.webmtype=video/webmsourcesrc=./video/一起向未来.mp4type=video/mp4/video/body动手实践demo3

04制作“西北之旅”网页网页制作案例教程（HTML5+CSS3）PART04

制作“西北之旅”网页祖国的大西北并非寸草不生，这里的浪漫从未停止，是烈阳，是黄土，是雪山，是草原，是大漠孤烟，是长河落日……一路走过山河湖泊，跨过戈壁沙漠，见到