HTML5与CSS3项目实战 (6)教学课件

1、企业级卓越人才培养（信息类专业集群） 01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 学习目标 学习目标学习目标010203掌握HTML5中video标签的属性掌握HTML5中video标签的方法和事件掌握HTML5中audio标签的属性学习目标 通过实现酷狗音乐播放器界面，学习HTML5相关的多媒体技术，掌握HTML5中新增音频和视频标签的使用04掌握HTML5中audio标签的方法和事件企业级卓越人才培养（信息类专业集群）02 学习路径 学习路径学习路径企业级卓越人才培养（信息类专业集群）03 任务描述 01 情境导入 02 功能描述03

2、 基本框架 04 开发环境 任务描述任务描述企业级卓越人才培养（信息类专业集群） 情境导入情境导入随着社会的发展、科技的进步，人们的生活压力越来越大，而大多数人选择听歌来缓解压力，所以音乐播放器在人们的生活中占据的很重要的地位。在编写一个音乐播放器时，应用最多的就是音频和视频。本次任务主要是实现酷狗音乐播放器界面设计。企业级卓越人才培养（信息类专业集群） 功能描述功能描述 01 02主体包括乐库、酷群图片链接等功能拓展头部包括酷狗音乐播放器手机版的头部截图 03底部包括音乐播放的控件企业级卓越人才培养（信息类专业集群） 基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windows

3、 7系统及以上系统软件环境服务器浏览器Sublime TextTomcat 7.0电脑端： 火狐浏览器 谷歌浏览器手机端： Webkit内核浏览器 Android手机内置 浏览器 开发环境开发环境企业级卓越人才培养（信息类专业集群）04 任务技能任务技能 audio标签的概述 video标签的概述 video标签的属性 任务技能任务技能 audio标签的属性企业级卓越人才培养（信息类专业集群）audio标签的概述audio标签定义了播放声音文件或者音频流的标准。支持三种音频格式，分别是Ogg Vorbis ，MP3，Wav。HTML代码为，其中src是规定要播放音乐的地址，controls是提

4、供播放、暂停和音量控制用的audio标签的概述标签的概述企业级卓越人才培养（信息类专业集群）属性值描述autoplayautoplay用来设定音频是否在页面加载后自动播放。如果出现该属性，则音频马上播放controlscontrols用来设置是否为音频添加控件，如播放、暂停、进度条、音量等，控制条的外观可以自定义looploop设置音频是否循环播放audio标签的属性audio标签的常见属性audio标签的属性标签的属性属性值描述autoplayautoplay（自动播放）如果出现该属性，则音频在就绪后会马上播放controls（控制）如果出现该属性，则向用户显示控件，比如播放按钮loop（循

5、环）如果出现该属性，则每当音频结束时将重新开始播放preload（加载）如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用autoplay则忽略该属性url要播放的音频的URL地址autobufferautobuffer（自动缓冲） 在网页显示时，该二进制属性表示由用户代理（浏览器）进行缓冲的内容，还是由用户使用相关API进行内容缓冲企业级卓越人才培养（信息类专业集群）video标签的概述video标签主要是定义播放视频文件或者视频流的标准，支持3种视频格式，分别为Ogg、WebM和MPEG4。HTML代码为video标签的概述标签的概述企业级卓越人才培养（信息类专业集群）vid

6、eo标签的属性video标签的常见属性video标签的属性标签的属性属性值描述autoplayautoplay如果出现该属性，则视频在就绪后就会马上播放controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮loop如果出现该属性，则每当视频结束时将重新开始播放preload如果出现该属性，则该视频在页面加载时进行加载，并预备播放url要播放视频的urlwidth宽度值设置视频播放器的宽度height高度值设置播放器的高度posterurl当视频未响应或缓冲不足时，该属性值链接到一个图像，该图像将以一定的比例显示出来企业级卓越人才培养（信息类专业集群）05 任务实施第一步：头部为酷狗音乐播放器的头部截图第二步：主体为图片链接和功能拓展，底部为播放音乐的控件 任务任务实施实施企业级卓越人才培养（信息类专业集群）06 任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述 通过本项目的学习，重点掌握HTML5中的多媒体元素标签（主要包括标签和标签）、HTML5的audio/video属性、audio/video方法、audio/video事件等。 任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 行