HTML5+CSS3网页设计实战 教案 4.7 影音类 video、audio标签

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.7图像、视音频类标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） Video、audio标签的简单用法。（2） Video、audio标签的相关属性。能力目标：具备在网页中嵌入视音频的能力。素养目标：（1）强调Video、audio英文单词的拼读，加强学生对英文的认识，为今后编程道路上克服心理畏惧。Video、audio标签Video、audio标签的简单用法。通过观看嵌有视频的网页激发学生兴趣。Video、audio标签的相关属性。通过相关案例的属性设置前后对比，让学生加强理解与认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习img标签，如果采用标签属性值的写法，也就是在html结构中<img>内部书写，规定图片的宽高值，那应该如何书写？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入HTML5作为最新的网页标准，广泛支持<video>标签。这意味着在几乎所有的现代浏览器上，都可以无需任何额外插件或扩展即可播放视频。这种高度的兼容性确保了视频内容能够在不同平台和设备上无缝播放，为开发者提供了极大的便利。<video>标签允许在网页中直接嵌入视频文件，使网页内容更加生动和丰富。无论是产品演示、教学视频还是娱乐内容，视频元素都能极大地吸引用户的注意力，提升用户体验。用户无需离开当前网页，即可观看视频内容，这大大增强了网页的互动性和吸引力。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.7.2video标签带宽提升，短视频横行，纯文字已满足不了部分人群需求，为了表现出更多的细节，烘托更浓烈的氛围感，越来越多的网页在局部引入视频元素。☆思政讲解1：享受短视频红利的时代。网页应用纷纷加入短视频功能，通过丰富的视频内容提升用户体验和粘性。同时，短视频的算法推荐技术不断优化，使得内容分发更加精准，满足用户的个性化需求。未来，短视频将继续在网页应用中发挥重要作用，推动互联网行业的创新发展。☆思政讲解2：切勿发布未经审核、未经授权、未经证实的不明视频来源，以免触犯民法、刑法。H5引入的<video>标签为浏览器提供了原生的视频播放支持，不再需要依赖外部插件如Flash。HTML支持mp4、webm和ogg这三种格式。<video>标签包含一个或多个带有不同视频源的<source>标签。浏览器将选择它支持的第一个源。用法常用格式：<videowidth=""height=""controlsloop><sourcesrc=""type="video/mp4"></video>讲解<video>标签对应的属性表。4.7.3audio标签<audio>标签定义声音，比如音乐或其他音频流。目前，<audio>元素支持的3种文件格式：Mp3、Wav、Ogg。可以在<audio>和</audio>之间放置文本内容，这些文本信息将会被显示在那些不支持<audio>标签的浏览器中。 audio标签的相关属性与video大致相同，用法示例如下：<audiocontrols> <sourcesrc="horse.ogg"type="audio/ogg"> <sourcesrc="horse.mp3"type="audio/mpeg"> 您的浏览器不支持audio元素。</audio>听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例15】在网页中嵌入视频。（1）把资源包内的“unit4-img\banner_mv.mp4”放在站点根目录下的“video”文件夹中。（2）编写HTML代码。（3）在本机各浏览器中预览效果，网页嵌入视音频元素有时会出现或这或那的兼容问题，具体情况可百度相关异常原因。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10Video标签Html结构代码正确，属性值正确。90总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，