Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 教案 第16讲次 任务17 视频与音频

教案序号：16授课日期课时数4章节名称任务17视频与音频教学内容重点嵌入视频和音频的方法。难点视频与音频的DOM操作。教学目的与要求了解网页支持的视频、音频格式。掌握HTML5中视频、音频的相关属性及嵌入视频、音频的操作。了解视频与音频的DOM操作。教学方法与手段教师采用任务驱动法，使用教学PPT辅助授课。教师操作演示，学生实训练习。学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。作业及思考题完成课堂上未完成的习题，通过网络平台上交作业。通过回帖的方式回答课上留下的思考题。预习下一节内容。

讲授内容课堂组织第一学时（任务17视频与音频17.1嵌入视频、17.2嵌入音频）实操任务目标发布实战演练——制作音乐播放器图16-SEQ图\*ARABIC\r11“音乐播放器”网页强化训练——制作视频播放网页图16-SEQ图\*ARABIC2“视频播放”网页知识准备嵌入视频<videosrc="视频文件路径"controls="controls"></video>嵌入音频<audiosrc="音频文件路径"controls="controls"></audio>source标签source标签：没有一种视频格式或音频格式让所有的浏览器都支持，source标签用于指定多个备用的不同格式文件的路径，浏览器将使用第一个可识别的格式。第二学时（任务17视频与音频17.4视频与音频的DOM操作）知识准备视频与音频的DOM操作video和audio的方法方法含义load()加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件。play()播放媒体文件。如果视频没有加载，则加载并播放；如果视频是暂停的，则变为播放。pause()暂停播放媒体文件。canPlayType()测试浏览器是否支持指定的媒体类型。video和audio的属性属性含义currentSrc返回当前媒体的URL。currentTime设置或返回媒体中的当前播放位置（以秒计）。duration返回媒体的长度（以秒计）。ended返回媒体的播放是否已结束。error返回表示媒体错误状态的MediaError对象。paused设置或返回媒体是否暂停。muted设置或返回是否关闭声音。volume设置或返回媒体的音量。height设置或返回媒体的高度值。width设置或返回媒体的宽度值。video和audio的事件事件含义play当执行方法play()时触发。playing正在播放时触发。pause当执行了方法pause()时触发。timeupdate当播放位置被改变时触发。ended当播放结束后停止播放时触发。waiting在等待加载下一帧时触发。ratechange当媒体的播放速度已更改时触发。volumechange当音量已更改时触发。canplay当浏览器可以播放媒体时触发。canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时触发。durationchange当媒体的时长已更改时触发。Loadstart当浏览器开始查找媒体时触发。progress当浏览器正在下载媒体时触发。suspend当浏览器刻意不获取媒体数据时触发。abort当媒体的加载已放弃时触发。error当在媒体加载期间发生错误时触发。emptied当目前的播放列表为空时触发。stalled当浏览器尝试获取媒体数据，但数据不可用时触发。loadedmetadata当浏览器已加载媒体的元数据时触发。loadeddata当浏览器已加载媒体的当前帧时触发。seeked当用户已移动/跳跃到媒体中的新位置时触发。seeking当用户开始移动/跳跃到媒体中的新位置时触发。第三学时实战演练——制作音乐播放器案例描述：设计并制作音乐播放器，网页效果和布局图如下。图16-SEQ图\*ARABIC3“音乐播放器”网页图16-SEQ图\*ARABIC4“音乐播放器”的网页布局第四学时强化训练——制作视频播放网页案例描述：设计并制作视频播放网页，网页效果和布局图如下图16-SEQ图\*ARABIC5“视频播放”网页图16-SEQ图\*ARABIC6“视频播放”的网页布局课后实训制作如图所示的视频播放器。视频播放器没有控制栏，通过“播放/暂停”按钮控制。同时，“放大”按钮可以放大视频，“缩小”按钮可以