教案
序号：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“视频播放”的网页布局
课后实训
制作如图所示的视频播放器。视频播放器没有控制栏，通过“播放/暂停”按钮控制。同时，“放大”按钮可以放大视频，“缩