06单元6音乐视频网页播放设计.docx
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《06单元6音乐视频网页播放设计.docx》由会员分享,可在线阅读,更多相关《06单元6音乐视频网页播放设计.docx(9页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、单元6音乐视频网页播放设计单元6音乐视频网页播放设计HTML5可以使用标签在页面中播放音乐,也可以使用标签在网页中播放视频。这相对HTML4使用和标签在页面中播放音乐或视频要简单得多。本单元通过对音乐播放器和视频播放器设计的探析与训练,重点讲解HTML5中的多媒体元素标签(主要包括标签和标签)、Audio/Video属性、Audio/Video方法、Audio/Video事件、CSS媒介类型等相关内容。读者应学会应用标签、标签以及相关属性、方法和事件设计音乐、视频网页。教学导航 教学目标1了解CSS媒介类型2掌握HTML5中的多媒体元素标签(主要包括标签和标签)3熟悉HTML5的Audio/V
2、ideo属性、Audio/Video方法和Audio/Video事件4学会应用标签、标签以及相关属性、方法和事件设计音乐、视频网页的方法 关键字音乐播放器视频播放器标签标签Audio/Video方法 参考资料(1)HTML5的常用标签及其属性、方法与事件参考附录A(2)CSS的属性参考附录B 教学方法任务驱动法、分组讨论法、探究学习法 课时建议6课时【实例探析】【任务6-1】探析基于HTML5的网页音乐播放器之一【效果展示】网页音乐播放器0601.html的浏览效果如图6-1所示。图6-1网页音乐播放器0601.html的浏览效果网页音乐播放器0601.html的主体结构为上、中、下结构,顶部
3、分布了多个播放按钮,中部为音乐列表,底部为播放模式切换按钮。【网页探析】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的浏
4、览效果【网页探析】1网页视频播放器0602.html的HTML代码探析网页视频播放器0602.html的HTML代码如表6-4所示。2网页视频播放器0602.html的CSS代码探析网页视频播放器0602.html的CSS代码如表6-5所示。【知识疏理】1HTML5的多媒体元素标签(1)标签标签用于定义音频内容,例如音乐或其他音频流。与之间插入的内容是供不支持audio元素的浏览器显示出不支持该标签的提示信息。(2)标签标签用于定义视频,例如电影片段或其他视频流。(3)标签标签用于为多媒体元素(例如和)定义媒介资源。标签允许指定可替换的视频/音频文件,供浏览器根据它对媒体类型或者编解码器的支持
5、进行选择。(4)标签标签用于定义嵌入的内容(包括各种媒体),格式可以是midi、wav、AIFF、AU、MP3、flash等。例:。(5)标签标签为诸如和元素之类的媒介规定外部文本轨道。2CSS媒介类型媒介类型(Media Types)允许定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等。3media规则media规则用于实现在相同的样式表中,使用不同的样式规则来针对不同的媒介。【引导训练】【任务6-3】设计基于HTML5的网页音乐播放器之二【任务描述】网页音乐播放器0603.html的界面效果如图6-3所示。图6-3网页音乐播放器0603.html的界面效果在图6-3
6、所示的网页音乐播放器中单击【播放】按钮,即可开始播放音乐,如图6-4所示。通过调整音量条还可以调节音量大小。图6-4网页音乐播放器0603.html的播放效果【任务实施】在本地硬盘的文件夹“06音乐视频网页播放设计0603”中创建网页0603.html。(1)编写网页音乐播放器0603.html的HTML代码网页音乐播放器0603.html的HTML代码如表6-6所示。保存网页0603.html,在浏览器中的浏览效果如图6-3所示。(2)设置网页音乐播放器的自动播放功能设置标签的autoplay属性,使之具有自动播放功能,对应的代码如下所示。 您的浏览器不支持audio标签! 保存网页,打开浏
7、览器,即可开始自动播放音乐,效果如图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,在浏览器中的浏览该网页,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 06 单元 音乐 视频 网页 播放 设计
![提示](https://www.deliwenku.com/images/bang_tan.gif)
限制150内