第8章 实现HTML5应用-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）同步教案

课程名称 第8章 实现HTML5应用 计划学时 8学时 内容分析 本章介绍了<video>标签和<audio>标签，DOM操作媒体文件的方法与属性，BOM的概述，地理定位概述，HTML5的geolocation属性，canvas的基本使用，canvas绘制图形和文本，canvas图像与变形，以及<svg>标签 教学目标 与 教学要求 【知识目标】 1. 了解BOM中window对象的4个基础属性 2. 认识地理定位 3. 了解<svg>标签 【技能目标】 1. 掌握<video>标签和<audio>标签 2. 掌握DOM操作媒体文件的方法与属性 3. 掌握HTML5的geolocation属性 4. 掌握canvas的基本使用 5. 掌握canvas绘制图形和文本 6. 掌握canvas图像与变形 【思政育人目标】 1. 培养学生健康的审美观念 2. 引导学生在学习中健全职业道德的规范。 3. 引导学生创新思维和探索的科学精神。 教学重点 掌握<video>标签和<audio>标签的应用、掌握getCurrentPosition()方法的使用、能够使用canvas绘制图形和文本 教学难点 实现本章节的3个小节案例 教学方式 课堂讲解配合ppt演示1学时 教 学 过 程 第一学时 （<video>标签） 一、提出需求，导入学习任务 （1）思考如何通过HTML5新元素实现HTML5的相关应用。 · HTML5是目前最新的HTML标准，是专门为承载丰富的web内容而设计的，并且无需额外插件。HTML5拥有新的语义、图形以及多媒体元素，如<canvas>、<video>等元素。并且HTML5提供的新元素和新的API，简化了web应用程序的搭建，如通过Geolocation API能更方便的获取到地理信息。 （2）明确学习方向。 · 掌握<video>标签 二、知识讲解 （一）<video>标签 1.定义 <video>标签定义视频，比如电影片段或其他视频流。<video>标签是HTML5的新标签，使用<video>标签可以在网页上直接插入视频文件，而不需要任何第三方插件。 2.优势 · 跨平台、好升级、好维护，相对于原生APP其开发成本较低。 · 具有良好的移动支持，比如支持手势，本地存储和视频续播等，通过HTML5可实现网站移动化。 · 代码更加简洁，交互性更好。 但<video>标签的不足之处是兼容性差，不同的浏览器支持的视频格式会不一样，这就导致了可能在网页上无法播放该视频。 3.视频格式 <video>标签支持的视频格式有MPEG4、WebM和Ogg。 · MPEG4简称MP4，是带有H.264视频编码和AAC音频编码的MPEG4文件。 · WebM是带有VP8视频编码和Vorbis音频编码的WebM文件。 · Ogg是带有Theora视频编码和Vorbis音频编码的Ogg文件。 4.语法格式 <video>标签的语法格式如下所示。 <video src="视频文件路径"></video> 或者 <video> <source src="视频文件路径" type="视频格式"></source> ...... </video> 在上述语法中，src是source的缩写，意思是来源，实际指视频的路径。<source>标签为媒体元素（比如<video>视频和<audio>音频）定义媒介资源，src属性规定媒体文件的URL地址，type属性规定资源的媒体类型。source标签可以写多个，这是为了兼容各个浏览器，但里面只能有一个src属性说明文件路径，指定type属性兼容不同浏览器解码支持，type属性的属性值有video/ogg、video/mp4和video/webm，例如，<source src="happy.mp4" type="video/mp4"></source>。 5.标签属性 <video>标签的常用属性有controls、autoplay、loop、muted、poster、preload、width、height等。 · controls · autoplay · loop · muted · poster · preload · width · height 6.演示说明 在网页中添加一个视频文件，使用<video>标签属性设置该文件。 三、知识巩固 （1）回顾上课前的学习目标，对本节课知识点进行总结。 （2）使用本章课后作业。 第二学时 （<audio>标签、DOM操作媒体文件） 一、回顾上节课内容 （1）对上节课布置的作业以及学生提出的问题进行答疑解惑。 （2）回顾上节课内容，引出本节课主题。 （3）明确学习方向。 · 掌握<audio>标签 · 熟练使用