单元设计-单元4 HTML5音频与视频

1、HTML5程序设计课程教学单元设计单元4 HTML5音频和视频授课教师：HTML5课程组授课班级:学时：4教学条件实训室、HBilder或Dreamweaver、投影设备、广播软件、互联网络教学素材教材、课件、授课录像、案例库、教学网站等教学目标设计知识目标：(1) 熟悉HTML5多媒体的格式及其特性；(2) 了解主流浏览器对HTML5多媒体的支持情况；(3) 掌握HTML5音频的相关属性和使用audio标签嵌入音频的基本方法；(4) 掌握HTML5视频的相关属性和使用video标签嵌入视频的基本方法；(5) 掌握使用HTML5 embed标签嵌入多媒体或flash插件的基本方法；(6) 掌握

2、使用HTML5音/视频属性控制播放效果的基本方法；(7) 了解 HTML5音频和视频的主要方法与事件。能力目标：(1) 能够使用audio标签在 HTML5页面中嵌入音频；(2) 能够使用video标签在 HTML5页面中嵌入视频文件; (3) 能够使用embed标签在 HTML5页面中定义外部可交互的内容或flash插件；(4) 能够使用HTML5自带属性控制音/视频的播放效果；(5) 能够结合CSS和JavaScript，实现对音频、视频、动画播放效果的控制。引例描述（1） 常见的Web音/视频效果，如何用HTML5代码实现？（2） 常见的 Web音/视频交互效果，如何用HTML5代码实现

3、？（3） 常见的 Web flash动画效果，如何用HTML5代码实现？教学内容（1）认识HTML5多媒体，了解 HTML5音/视频格式及浏览器支持情况；（2）使用audio、video、embed标签在HTML5网页中嵌入音/视频；（3）使用embed标签在HTML5网页中嵌入flash动画；（4）使用HTML5属性控制音/视频在网页中的播放效果；（5）了解 HTML5音/视频的主要方法与事件。重点：(1) HTML5音/视频格式及浏览器支持情况；(2) HTML5 audio、video、embed标签的用法；(3) HTML5 audio、video、embed标签的属性。难点：(1)

4、在HTML5中嵌入音频的方法和技巧；(2) 在HTML5中嵌入视频的方法和技巧；(3) 在HTML5中嵌入flash插件。引例分析与实现（1）引例分析；（2）引例代码；（3）引例系统环境。教学过程设计4.1 HTML5多媒体概述（学时数：1）主要步骤教学内容教学方法教学手段师生活动问题 引入HTML5音频和视频有哪些格式？HTML5音频和视频的有哪些编解码器？是不是所有浏览器都支持HTML5音/视频？讲授演示引导文法多媒体讲解演示观察思考知识讲解知识点1：HTML5多媒体特性。知识点2： HTML5视频和音频编解码器。知识点3：HTML5多媒体的格式。知识点4：支持 HTML5音/视频的浏览器

5、。启发讲解讨论归纳多媒体课件演示提问与思考分组讨论示范 操作操作1：不同格式HTML5音/视频的播放效果。操作2：主流浏览器对HTML5音/视频的支持情况。做中教问题引导操作演示多媒体系统演示观察思考交流互动归纳总结实战 训练课堂实践1-1：运行一段代码，观察HTML5多媒体效果；课堂实践1-2：运行多段代码，观察不同格式音频和视频在不同浏览器中的播放效果。（通过实战，体验HTML5多媒体的特性和浏览器不同的支持情况，为接下来学习HTML5多媒体打好基础。）动手实践做中学归纳总结实践环境网络资源做中学查阅资料分组讨论实践操作巡视指导评估讨论(1) 评估讨论实战训练的实施过程；(2) 展示学生的

6、分组讨论结果（方案）；(3) 评估、点评学生的实战结果。教师启发讨论归纳评估激励实践任务书分组评估演示结果归纳总结课堂总结(1) HTML5音频和视频的特性和格式；(2) HTML5音频和视频的编解码器；(3) 并不是所有浏览器都支持HTML5音/视频；(4) 不同浏览器对 HTML5音/视频的支持。教师总结启发引导多媒体课件演示整理笔记引导创新课后作业到爱奇艺、乐视视频、QQ音乐、酷狗音乐等影音/视频网站，观察网页特点和音/视频的播放及控制效果。内容讲授问题引导多媒体网络资源布置作业提出要求教学过程设计4.2 嵌入音频和视频（学时数：3）主要步骤教学内容教学方法教学手段师生活动问题 引入在H

7、TML5页面中如何嵌入音频、视频和flash动画？如何控制音频、视频和动画的播放？讲授演示引导文法多媒体讲解演示观察思考知识讲解(1) 知识点1：HTML5音频的相关属性和使用audio标签嵌入音频的基本方法；(2) 知识点2：HTML5视频的相关属性和使用video标签嵌入视频的基本方法；(3) 知识点3：HTML5 embed标签嵌入多媒体或flash插件的基本方法；(4) 知识点4：使用HTML5音/视频属性控制播放效果的方法；(5) 知识点5：HTML5音/视频的主要方法与事件。启发讲解讨论归纳多媒体课件演示提问与思考分组讨论示范 操作操作1：通过小段代码形成的小实例演示每个标签的作用

8、和基本应用方法；操作2：通过完整长代码形成的综合性实例，演示各个标签元素的作用和综合用法；操作3：通过案例代码，演示多个标签及其元素的综合应用方法。做中教问题引导操作演示多媒体系统演示观察思考交流互动归纳总结实战 训练课堂实践4-2：模仿综合实例和实践案例，利用给定的标签，完成一个HTML5音/视频动态网页效果的制作。动手实践做中学归纳总结实践环境网络资源做中学查阅资料讨论与实践指导与评价评估讨论(1) 评估实战训练的实施过程；(2) 展示学生的分组讨论结果（方案）；(3) 评估（点评）学生的实战结果。教师启发讨论归纳评估激励实践任务书分组评估演示结果归纳总结课堂总结(1) HTML5音/视频的格式和编码，主流浏览器分别支持哪种格式媒体文件？(2) 利用audio、video、embed标签如何嵌入 HTML5音、视频和swf文件；(3