项目10 多媒体技术教案32

附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：2026年2月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称课程类型□理论☑理论+实践□实训总学时64授课地点周次16授课学时2教学目标（一）知识目标了解HTML5多媒体技术的优势，掌握主流浏览器对<video>和<audio>标签的支持版本。掌握HTML5中<video>标签嵌入视频的基本语法，熟悉src、controls、autoplay等常见属性的含义与用法。掌握HTML5中标签嵌入音频的基本语法，能区分音视频标签通用属性的使用场景。掌握用CSS设置视频宽高的两种方法（标签属性、CSS样式），理解网页布局中视频尺寸设置的重要性。（二）技能目标能独立使用<video>标签在网页中嵌入本地视频，根据需求设置播放控件、自动播放、循环播放等效果。能独立使用<audio>标签在网页中嵌入本地音频，实现音频的基础播放控制。能运用CSS为视频设置宽高、浮动等样式，配合布局实现音视频与其他元素的合理排版。（三）素质目标培养代码规范书写习惯，注重标签属性、文件路径的准确性，提升代码的可读性和可维护性。建立“需求→结构搭建→样式设置→功能实现”的前端开发思维，提升网页布局和多媒体融合的实操能力。培养问题排查能力，能独立解决音视频无法播放、样式错乱、自动播放失效等常见问题。教学重点<video>和<audio>标签的基本语法及核心属性（src、controls、autoplay、loop）的使用。CSS设置视频宽高和布局的方法，实现视频与网页其他元素的协同排版。公司视频宣传模块的HTML结构搭建，包括版心设置、左右分栏、标题/简介/视频的层级布局。教学难点Chrome浏览器中视频自动播放的限制（静音播放），掌握muted属性的搭配使用。音视频文件路径的正确书写，区分相对路径和绝对路径的使用场景，解决文件无法加载的问题。视频宣传模块中左右分栏的精准布局，解决浮动带来的边距、高度适配问题。教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计1.理实结合：以模块化任务为核心，知识点对应实操场景，避免纯理论讲解。2.三维目标：明确知识、技能、素质目标，自然融入思政元素。3.分层适配：设计基础、提高、拓展内容，适配不同学生水平。4.闭环反馈：遵循“讲解-实操-纠错-总结-复盘”逻辑，强化知识吸收。教学实施要求1.讲练结合：实操占比≥60%，以案例演示+自主实操为主。2.规范把控：强调语义化HTML、模块化CSS，注重代码细节与注释。3.问题导向：聚焦高频错误，精准突破教学难点。4.过程评价：结合课堂表现、作业质量、实操成果综合评价。教学后记课后练习完成教材对应习题拓展提高无教学反思教学内容与教学过程注释（一）巩固复习（5分钟）提问回顾上一章节CSS3核心知识点：CSS3过渡的简写属性语法是什么？如何实现元素的缩放和平移？transform:scale()和translate3d()的使用方法？实操小提问：“如何实现图片鼠标悬停时放大1.2倍，且带有0.3秒的平滑过渡？”，引导学生回忆transition和transform的结合使用。重点强调：CSS3动画和布局知识是本次课多媒体模块样式美化、交互动画实现的基础，为后续音视频模块添加动画效果做好铺垫。（二）新课导入（5分钟）展示两组网页对比效果：一组是纯文字的企业宣传页，一组是带有视频宣传、音频背景的企业首页，提问学生：“哪一组页面的信息展示更直观、吸引力更强？传统网页中嵌入音视频需要借助什么工具？存在哪些弊端？”总结答案：传统网页嵌入音视频依赖Flash、JavaScript等第三方插件，代码复杂、兼容性差；HTML5新增了<video>和``原生标签，无需插件，代码简洁、兼容性好，是目前网页多媒体开发的主流方式。引出课题：本节课将学习HTML5多媒体技术，掌握音视频的嵌入方法、样式设置，最终完成公司视频宣传模块的完整开发，同时结合CSS3动画知识为模块添加交互动画，明确本课时的三维教学目标。（三）新课讲授（65分钟）本环节采用理论讲解+即时实操+项目实战的模式，先讲解音视频嵌入基础理论，再完成基础实操，最后带领学生完成公司视频宣传模块的完整开发，边讲边练、学用结合。模块1：HTML5多媒体技术概述（5分钟）讲解HTML5多媒体技术的核心优势：原生标签支持，无需第三方插件；代码简洁，易上手；主流浏览器广泛支持（Firefox3.5+、Chrome3.0+、IE9.0+等）。展示浏览器支持表，强调：开发中需兼顾浏览器兼容性，优先选择MP4（视频）、MP3（音频）等通用格式。核心知识点：HTML5通过<video>（视频）和``（音频）两个原生标签实现多媒体嵌入，二者语法和核心属性高度通用。模块2：嵌入视频——<video>标签的使用（15分钟）基本语法讲解：<videosrc="视频文件路径"controls="controls">替代文本</video>。src：设置视频文件路径（相对路径/绝对路径），重点讲解相对路径的书写规范（如media/jiangxin.mp4）。controls：显示播放控件（播放、暂停、进度条、音量等），属性值可省略。替代文本：浏览器不支持<video>标签时显示的内容，提升页面兼容性。即时实操1：学生在VSCode中创建HTML文件，嵌入本地MP4视频，实现基础播放功能，教师巡视指导路径书写问题。常见属性讲解：结合表格讲解<video>标签的核心属性，每讲一个属性配合实操演示。autoplay：页面加载完成后自动播放，重点强调：Chrome浏览器要求搭配muted（静音）属性才能实现自动播放。loop：视频播放结束后循环播放，属性值可省略。poster：视频缓冲时显示的封面图，取值为图片文件路径。preload：页面加载时预加载视频，autoplay会覆盖该属性。即时实操2：在实操1的基础上，为视频添加autoplaymutedloop属性，实现静音自动循环播放，验证Chrome浏览器的自动播放规则。视频尺寸设置：讲解两种设置视频宽高的方法。标签属性：<videowidth="760"height="428"></video>，简单快捷，但灵活性差。CSS样式：为<video>标签设置width、height样式，支持百分比、像素等单位，适配性更强，开发中优先使用。即时实操3：用CSS为视频设置宽度100%、高度自适应，配合浮动实现视频左栏布局。模块3：嵌入音频——``标签的使用（10分钟）基本语法讲解：<audiosrc="音频文件路径"controls>替代文本，与<video>标签语法基本一致，无需设置宽高。核心属性：src、controls、autoplay、loop、preload，与<video>标签通用，讲解时重点对比差异（无宽高、无poster）。即时实操4：学生在VSCode中创建HTML文件，嵌入本地MP3音频，实现基础播放+循环播放，掌握音频嵌入的基本方法。核心提醒：音频自动播放同样受浏览器限制，部分浏览器要求用户手动触发后才能播放，开发中避免过度依赖音频自动播放。模块4：项目实战——公司视频宣传模块开发（30分钟）以制作公司首页视频宣传模块为核心，分项目准备→结构搭建→样式编写→功能实现四步，带领学生分步开发，整合所学知识点，实现“布局+多媒体+样式”的融合。项目准备：在VSCode中创建项目文件夹CustomerCase，包含：页面文件制作公司视频宣传模块.html、资源目录media（存放视频）、images（存放背景图、图标）。HTML结构搭建：按需求搭建层级结构，重点讲解版心+左右分栏的布局逻辑。外层div.box：包裹整个模块，设置背景图。内层div.container：版心，宽度1200px，居中显示。标题区：h1（主标题）、p.author（作者），居中显示。内容区div.content：左右分栏，左栏div.left嵌入视频，右栏div.right分上下两部分（div.top视频简介、div.bottom播放量/数据）。教师演示代码编写，强调语义化标签和层级结构的清晰性，避免嵌套混乱。CSS样式编写：按模块编写样式，重点解决布局、背景、遮罩、文字样式问题。初始化样式：清除所有元素内外边距（*{margin:0;padding:0;}）。外层.box：设置宽度100%、高度660px、背景图（background-image）、背景铺满（background-size:100%100%）、内边距70px。版心.container：宽度1200px、高度100%、居中（margin:0auto）。标题样式：h1、.author居中显示，设置行高，保证垂直居中。内容区.content：左右分栏用浮动布局，左栏.left宽度760px、浮动左，右栏.right宽度440px、浮动左。右栏样式：.top设置半透明背景（rgba(0,0,0,.5)）、内边距，.bottom同样设置半透明背景，图标与文字横向排列。文字样式：右栏文字设置为白色，适配深色半透明背景，提升可读性。功能与动画实现：视频功能：为<video>标签添加controlsautoplaymutedloop，实现静音自动循环播放，符合浏览器规则。基础动画：结合CSS3知识，为视频添加鼠标悬停效果——transform:scale(1.05)+box-shadow，配合transition:all0.3sease实现平滑过渡。项目测试：运行页面，测试视频播放、布局适配、动画效果，带领学生排查常见问题（如视频溢出、浮动未清除、自动播放失效）。模块5：网络音视频的调用（5分钟）讲解网络音视频的嵌入方法：将<video>/``标签的src属性设置为网络音视频的URL地址即可，与本地嵌入语法一致。核心提醒：需保证网络URL地址的有效性，优先选择支持跨域的音视频资源，避免出现跨域播放限制。简单演示：嵌入一个公开的网络MP4视频，让学生理解本地与网络音视频嵌入的差异。（四）课程思政（10分钟）技术创新的便捷性与普惠性：HTML5多媒体技术替代了传统的Flash插件，让网页音视频开发变得简单、高效，降低了开发门槛，让更多开发者能快速实现网页多媒体效果。让学生理解技术创新的核心是简化流程、提升效率、实现普惠，在学习中主动拥抱新技术、新规范。多媒体技术的价值与责任：音视频等多媒体元素让网页的信息传递更直观、更生动，不仅能提升企业宣传、产品展示的效果，还能用于红色文化、公益宣传、知识科普等领域。让学生认识到技术是传递价值的载体，在开发中要注重多媒体内容的正向性，用技术传播正能量、弘扬优秀文化。细节与严谨的职业素养：网页多媒体开发中，一个小小的细节错误（如文件路径写错、属性拼写错误、浏览器兼容忽略），就会导致音视频无法播放、页面布局错乱。让学生体会细节决定成败，在代码编写中培养严谨、细致的职业素养，养成反复测试、排查问题的好习惯。融合与创新的开发思维：本次课将HTML5多媒体技术与CSS3动画、布局知识结合，实现了“视频+布局+动画”的融合效果。让学生树立技术融合创新的思维，前端开发不是单一技术的使用，而是HTML、CSS、JavaScript等技术的综合运用，学会将不同知识点结合，打造更丰富、更优质的网页产品。总结与作业1.课堂总结梳理本课时核心知识点：HTML5多媒体技术的优势；<video>和``标签的基本语法、核心属性；视频宽高的CSS设置方法；公司视频宣传模块的布局与开发；网络音视频的调用方法。强调重点：<video>标签的autoplaymuted搭配使用；CSS浮动实现左右分栏布局；文件路径的正确书写；多媒体与CSS3动画的结合。梳理易错点：Chrome浏览器自动播放限制；相对路径书写错误；浮动布局未做适配；半透明背景的rgba值设置错误。知识框架梳理：HTML5<video>/``标签实现多媒体嵌入，CSS实现样式和布局，CSS3动画实现交互动效，三者结合是网页多媒体开发的核心思路。2.作业布置分基础题、提高题、拓展题，兼顾不同层次学生的学习需求，要求代码规范、添加注释，实现技术的灵活应