06单元6音乐视频网页播放设计.docx

单元6音乐视频网页播放设计单元6音乐视频网页播放设计HTML5可以使用<audio>标签在页面中播放音乐，也可以使用<video>标签在网页中播放视频。这相对HTML4使用<embed>和<object>标签在页面中播放音乐或视频要简单得多。本单元通过对音乐播放器和视频播放器设计的探析与训练，重点讲解HTML5中的多媒体元素标签（主要包括<audio>标签和<video>标签）、Audio/Video属性、Audio/Video方法、Audio/Video事件、CSS媒介类型等相关内容。读者应学会应用<audio>标签、<video>标签以及相关属性、方法和事件设计音乐、视频网页。教学导航 教学目标1了解CSS媒介类型2掌握HTML5中的多媒体元素标签（主要包括<audio>标签和<video>标签）3熟悉HTML5的Audio/Video属性、Audio/Video方法和Audio/Video事件4学会应用<audio>标签、<video>标签以及相关属性、方法和事件设计音乐、视频网页的方法 关键字音乐播放器视频播放器<audio>标签<video>标签Audio/Video方法 参考资料（1）HTML5的常用标签及其属性、方法与事件参考附录A（2）CSS的属性参考附录B 教学方法任务驱动法、分组讨论法、探究学习法 课时建议6课时【实例探析】【任务6-1】探析基于HTML5的网页音乐播放器之一【效果展示】网页音乐播放器0601.html的浏览效果如图6-1所示。图6-1网页音乐播放器0601.html的浏览效果网页音乐播放器0601.html的主体结构为上、中、下结构，顶部分布了多个播放按钮，中部为音乐列表，底部为播放模式切换按钮。【网页探析】1网页音乐播放器0601.html的HTML代码探析网页音乐播放器0601.html的HTML代码如表6-1所示。2网页音乐播放器0601.html的CSS代码探析网页音乐播放器0601.html的CSS代码如表6-2所示。3网页音乐播放器0601.html的JavaScript代码探析网页音乐播放器0601.html的JavaScript代码如表6-3所示。【任务6-2】探析基于HTML5的网页视频播放器之一【效果展示】网页视频播放器0602.html的浏览效果如图6-2所示。图6-2网页视频播放器0602.html的浏览效果【网页探析】1网页视频播放器0602.html的HTML代码探析网页视频播放器0602.html的HTML代码如表6-4所示。2网页视频播放器0602.html的CSS代码探析网页视频播放器0602.html的CSS代码如表6-5所示。【知识疏理】1HTML5的多媒体元素标签（1）<audio>标签<audio>标签用于定义音频内容，例如音乐或其他音频流。<audio>与</audio>之间插入的内容是供不支持audio元素的浏览器显示出不支持该标签的提示信息。（2）<video>标签<video>标签用于定义视频，例如电影片段或其他视频流。（3）<source>标签<source>标签用于为多媒体元素（例如<video>和<audio>）定义媒介资源。<source>标签允许指定可替换的视频/音频文件，供浏览器根据它对媒体类型或者编解码器的支持进行选择。（4）<embed>标签<embed>标签用于定义嵌入的内容（包括各种媒体），格式可以是midi、wav、AIFF、AU、MP3、flash等。例：<embed src="flash.swf" />。（5）<track>标签<track>标签为诸如<video>和<audio>元素之类的媒介规定外部文本轨道。2CSS媒介类型媒介类型（Media Types）允许定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等。3media规则media规则用于实现在相同的样式表中，使用不同的样式规则来针对不同的媒介。【引导训练】【任务6-3】设计基于HTML5的网页音乐播放器之二【任务描述】网页音乐播放器0603.html的界面效果如图6-3所示。图6-3网页音乐播放器0603.html的界面效果在图6-3所示的网页音乐播放器中单击【播放】按钮，即可开始播放音乐，如图6-4所示。通过调整音量条还可以调节音量大小。图6-4网页音乐播放器0603.html的播放效果【任务实施】在本地硬盘的文件夹“06音乐视频网页播放设计0603”中创建网页0603.html。（1）编写网页音乐播放器0603.html的HTML代码网页音乐播放器0603.html的HTML代码如表6-6所示。保存网页0603.html，在浏览器中的浏览效果如图6-3所示。（2）设置网页音乐播放器的自动播放功能设置<audio>标签的autoplay属性，使之具有自动播放功能，对应的代码如下所示。 <audio src="music/song.mp3" controls="controls" autoplay="autoplay"> 您的浏览器不支持audio标签！ </audio> 保存网页，打开浏览器，即可开始自动播放音乐，效果如图6-4所示。【任务6-4】设计基于HTML5的网页视频播放器之二【任务描述】网页视频播放器0604.html的基本界面效果如图6-5所示。图6-5网页视频播放器0604.html的界面效果在图6-5所示的网页视频播放器中单击【播放】按钮，即可开始播放音乐，通过调整音量条还可以调节音量大小。【任务实施】在本地硬盘的文件夹“06音乐视频网页播放设计0604”中创建网页0604.html。（1）编写网页视频播放器0604.html的初始HTML代码网页视频播放器0604.html的初始HTML代码如表6-7所示。保存网页0604.html，在浏览器中的浏览该网页，然后单击鼠标右键，在弹出快捷菜单中单击【播放】按钮，如图6-6所示。在该快捷菜单中单击【显示控件】命令还可以显示如图6-3所示的视频播放控件按钮。图6-6利用快捷菜单命令播放视频（2）设置网页视频播放器的视频尺寸和播放控件功能设置网页视频播放器的视频尺寸和播放控件功能的HTML代码如表6-8所示，这里提供了多种格式的视频文件，以便浏览器从中播放自身支持的视频文件。（3）设置网页视频播放器的自动播放和循环播放等多项功能在本地硬盘的文件夹“06音乐视频网页播放设计0604”中创建网页06042.html。设置网页视频播放器的自动播放和循环播放等多项功能的HTML代码如表6-9所示。（4）设置网页视频播放器的视频尺寸动态调整功能在本地硬盘的文件夹“06音乐视频网页播放设计0604”中创建网页06043.html。设置网页视频播放器的视频尺寸动态调整功能的HTML代码及相关的JavaScript代码如表6-10所示。保存网页060403.html，在浏览器中的浏览效果如图6-7所示，拖动上方进度条中的滑动块可以动态调整视频的尺寸。图6-7可以动态调整视频尺寸的视频播放器（5）编写JavaScript代码实现视频播放器的自动播放功能在本地硬盘的文件夹“06音乐视频网页播放设计0604”中创建网页060404.html。实现视频播放器的自动播放功能的HTML代码及相关的JavaScript代码如表6-11所示。保存网页060404.html，在浏览器中浏览该网页，可以看出视频可以自动进行播放。【同步训练】【任务6-5】设计基于HTML5的网页音乐播放器之三【任务描述】网页音乐播放器0605.html的界面效果如图6-8所示。图6-8网页音乐播放器0605.html的界面效果该网页浏览时，音乐播放器能自动进行播放。【任务实施】在本地硬盘的文件夹“06音乐视频网页播放设计0605”中创建网页0605.html。（1）通过设置网页音乐播放器的自动播放功能实现所需效果设置<audio>标签的autoplay属性，使之具有自动播放功能，对应的代码如下所示。<audio id="theaudio" src="media/北京北京.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio> 保存网页0605.html，打开浏览器，即可开始自动播放音乐，效果如图6-8所示。（2）编写JavaScript代码实现网页音乐播放器自动播放效果网页音乐播放器0605.html中实现所需功能的JavaScript代码如表6-12所示。保存该网页，打开浏览器，即可开始自动播放音乐。【任务6-6】设计基于HTML5的网页音乐播放器之四【任务描述】网页音乐播放器0606.html的界面效果如图6-9所示。图6-9网页音乐播放器0606.html的界面效果在图6-9所示的网页音乐播放器中单击【Play】按钮，即可开始播放音乐，同时【Play】按钮的名称也变为“Pause”，如图6-10所示。图6-10网页音乐播放器0606.html的播放效果【任务实施】在本地硬盘的文件夹“06音乐视频网页播放设计0606”中创建网页0606.html。1编写网页音乐播放器0606.html的HTML代码网页音乐播放器0606.html的HTML代码如表6-13所示。2编写JavaScript代码实现网页音乐播放器0604.html所需的功能网页音乐播放器0606.html中实现所需功能的JavaScript代码如表6-14所示。【任务6-7】设计基于HTML5的网页视频播放器之三【任务描述】网页视频播放器0607.html的界面效果如图6-11所示。图6-11网页视频播放器0607.html的界面效果在图6-11所示的网页视频播放器中单击【Play】按钮，即可开始播放视频，同时【Play】按钮的名称也变为“stop”，如图6-12所示。图6-12网页视频播放器0607.html的播放效果【任务实施】在本地硬盘的文件夹“06音乐视频网页播放设计0607”中创建网页0607.html。1编写网页视频播放器0607.html的HTML代码网页视频播放器0607.html的HTML代码如表6-15所示。2编写JavaScript代码实现网页视频播放器0607.html所需的功能网页视频播放器0607.html中实现所需功能的JavaScript代码如表6-16所示。【拓展训练】【任务6-8】设计基于HTML5的网页音乐播放器之五【任务描述】网页音乐播放器0608.html的初始界面效果如图6-13所示。图6-13网页音乐播放器0608.html的初始界面效果在图6-13所示的网页音乐播放器中单击【展示】按钮，即可展示歌曲列表，单击歌曲名称即可开始播放音乐，如图6-14所示。图6-14网页音乐播放器0608.html的播放效果【任务6-9】设计基于HTML5的网页视频播放器之四【任务描述】网页视频播放器0609.html的界面效果如图6-15所示。图6-15网页视频播放器0609.html的界面效果【单元小结】本单元通过对音乐播放器和视频播放器设计的探析与三步训练，重点熟悉了HTML5中的多媒体元素标签（主要包括<audio>标签和<video>标签）、HTML5的Audio/Video属性、Audio/Video方法、Audio/Video事件、CSS媒介类型等，学会了应用<audio>标签、<video>标签以及相关属性、方法和事件设计音乐视频网页的方法。9