《HTML5与CSS3项目实战》课件_CORE06.pptx

酷狗音乐播放器界面项目六企业级卓越人才培养（信息类专业集群）

目录01学习目标02学习路径03任务描述04任务技能05任务实施06任务总结

01学习目标

学习目标010203掌握HTML5中video标签的属性掌握HTML5中video标签的方法和事件掌握HTML5中audio标签的属性学习目标通过实现酷狗音乐播放器界面，学习HTML5相关的多媒体技术，掌握HTML5中新增音频和视频标签的使用04掌握HTML5中audio标签的方法和事件企业级卓越人才培养（信息类专业集群）

02学习路径

学习路径企业级卓越人才培养（信息类专业集群）

03任务描述

01情境导入02功能描述03基本框架?04开发环境?任务描述企业级卓越人才培养（信息类专业集群）

情境导入随着社会的发展、科技的进步，人们的生活压力越来越大，而大多数人选择听歌来缓解压力，所以音乐播放器在人们的生活中占据的很重要的地位。在编写一个音乐播放器时，应用最多的就是音频和视频。本次任务主要是实现酷狗音乐播放器界面设计。企业级卓越人才培养（信息类专业集群）

功能描述0102主体包括乐库、酷群图片链接等功能拓展头部包括酷狗音乐播放器手机版的头部截图03底部包括音乐播放的控件企业级卓越人才培养（信息类专业集群）

基本框架企业级卓越人才培养（信息类专业集群）

系统环境Windows7系统及以上系统软件环境服务器浏览器Sublime?TextTomcat7.0电脑端：火狐浏览器谷歌浏览器手机端：Webkit内核浏览器Android手机内置浏览器开发环境企业级卓越人才培养（信息类专业集群）

04任务技能

任务技能audio标签的概述video标签的概述video标签的属性任务技能audio标签的属性企业级卓越人才培养（信息类专业集群）

audio标签的概述audio标签定义了播放声音文件或者音频流的标准。支持三种音频格式，分别是OggVorbis，MP3，Wav。HTML代码为inputsrc=a.mp3controls=controls，其中src是规定要播放音乐的地址，controls是提供播放、暂停和音量控制用的audio标签的概述企业级卓越人才培养（信息类专业集群）属性值描述autoplayautoplay用来设定音频是否在页面加载后自动播放。如果出现该属性，则音频马上播放controlscontrols用来设置是否为音频添加控件，如播放、暂停、进度条、音量等，控制条的外观可以自定义looploop设置音频是否循环播放

audio标签的属性audio标签的常见属性audio标签的属性属性值描述autoplayautoplay（自动播放）如果出现该属性，则音频在就绪后会马上播放controls（控制）如果出现该属性，则向用户显示控件，比如播放按钮loop（循环）如果出现该属性，则每当音频结束时将重新开始播放preload（加载）如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用autoplay则忽略该属性url要播放的音频的URL地址autobufferautobuffer（自动缓冲）在网页显示时，该二进制属性表示由用户代理（浏览器）进行缓冲的内容，还是由用户使用相关API进行内容缓冲企业级卓越人才培养（信息类专业集群）

video标签的概述video标签主要是定义播放视频文件或者视频流的标准，支持3种视频格式，分别为Ogg、WebM和MPEG4。HTML代码为videosrc=””controls=”controls”video标签的概述企业级卓越人才培养（信息类专业集群）

video标签的属性video标签的常见属性video标签的属性属性值描述autoplayautoplay如果出现该属性，则视频在就绪后就会马上播放controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮loop如果出现该属性，则每当视频结束时将重新开始播放preload如果出现该属性，则该视频在页面加载时进行加载，并预备播放url要播放视频的urlwidth宽度值设置视频播放器的宽度height高度值设置播放器的高度posterurl当视频未响应或缓冲不足时，该属性值链接到一个图像，该图像将以一定的比例显示