HTML5+CSS3移动Web开发实战单元 6 音乐视频播放网页设计.pptxVIP

HTML5+CSS3移动 Web 开发实战陈承欢 编著精选 8 种类型的网站项目，55 个典型教学案例实例探析 + 引导训练 + 同步训练 + 拓展训练反映移动 Web 应用开发的实际需求和水平单元?6 音乐视频播放网页设计 HTML5可以使用audio标签在页面中播放音乐，也可以使用video标签在网页中播放视频。这相对HTML4使用embed和object标签在页面中播放音乐或视频要简单得多。 本单元通过对音乐播放器和视频播放器设计的探析与训练，重点讲解HTML5中的多媒体元素标签（主要包括audio标签和video标签）、Audio/Video属性、Audio/Video方法、Audio/Video事件、CSS媒介类型等相关内容。读者应学会应用audio标签、video标签以及相关属性、方法和事件设计音乐、视频网页。实例探析任务6-1 探析基于HTML5的网页音乐播放器之一【效果展示】 网页音乐播放器0601.html的浏览效果如图6-1所示。 网页音乐播放器0601.html的主体结构为顶部、中部、底部结构，顶部分布了多个播放按钮，中部为音乐列表，底部为播放模式切换按钮。图6-1　网页音乐播放器0601.html的浏览效果【网页探析】1．网页音乐播放器0601.html的HTML代码探析 网页音乐播放器0601.html的HTML代码如表6-1所示。表6-1　网页音乐播放器0601.html的HTML代码续表2．网页音乐播放器0601.html的CSS代码探析 网页音乐播放器0601.html的CSS代码如表6-2所示。表6-2　网页音乐播放器0601.html的CSS代码续表续表3．网页音乐播放器0601.html的JavaScript代码探析 网页音乐播放器0601.html的JavaScript代码如表6-3所示。表6-3　网页音乐播放器0601.html的JavaScript代码续表续表续表续表任务6-2 探析基于HTML5的网页视频播放器之一【效果展示】 网页视频播放器0602.html的浏览效果如图6-2所示。图6-2　网页视频播放器0602.html的浏览效果【网页探析】1．网页视频播放器0602.html的HTML代码探析 网页视频播放器0602.html的HTML代码如表6-4所示。表6-4　网页视频播放器0602.html的HTML代码2．网页视频播放器0602.html的CSS代码探析 网页视频播放器0602.html的CSS代码如表6-5所示。表6-5　网页视频播放器0602.html的CSS代码知识梳理1．HTML5的多媒体元素标签（1）audio标签 audio标签用于定义音频内容，如音乐或其他音频流。audio与/audio之间插入的内容供不支持audio元素的浏览器显示出不支持该标签的提示信息。（2）video标签 video标签用于定义视频，如电影片段或其他视频流。当前，video元素支持以下3种视频格式。① Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件。② MPEG4：带有H.264视频编码和AAC音频编码的MPEG 4文件。③ WebM：带有VP8视频编码和Vorbis音频编码的WebM文件。 video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式进行播放。（3）source标签 source标签用于为多媒体元素（如video和audio）定义媒介资源。source标签允许指定可替换的视频/音频文件，供浏览器根据它对媒体类型或者编解码器的支持进行选择。（4）embed标签 embed标签用于定义嵌入的内容（包括各种媒体），格式可以是MIDI、WAV、AIFF、AU、MP3、SWF等。（5）track标签 track标签为诸如video和audio元素之类的媒介规定外部文本轨道。2．CSS媒介类型 媒介类型（Media Types）允许定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介等中。 某些CSS属性仅仅被设计为针对某些媒介，如“voice-family”属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介，如“font-size”属性可被用于显示器及印刷媒介，但是也许会带有不同的值。显示器显示的文档的字号通常会比纸媒介文档的字号更大，同时，在显示器上，sans-serif 字体更易阅读，而在纸媒介上，serif 字体更易阅读。3．@media规则 @media规则用于实现在相同的样式表中，使用不同的样式规则来针对不同的媒介。图6-3　网页音乐播放器0603.html的界面效果 引导训练任务6-3 设计基于HTML5的网页音乐播放器之二【任务描述】 网页音乐播放器0603.h