1、任务17 视频与音频第七单元 网页多媒体学习目标掌握嵌入音频嵌入视频1.网页支持的视频、音频格式2.视频与音频的DOM操作了解:学习目标任务目标实战演练制作音乐播放器任务目标强化训练制作视频播放网页知识准备1.嵌入视频n 嵌入视频：属性属性值含义说明srcurl地址要播放视频的URL。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。autoplayautoplay如果出现该属性，则视频在就绪后马上播放。width像素值设置视频播放器的宽度。height像素值设置视频播放器的高度。looploop如果出现该属性，则当视频文件完成播放后再次开始播放。preloadp
2、reload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。posterurl地址当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定比例显示出来。知识准备2.嵌入音频n 嵌入音频：属性属性值含义说明srcurl地址要播放音频的URL。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。autoplayautoplay如果出现该属性，则音频在就绪后马上播放。width像素值设置音频播放器的宽度。height像素值设置音频播放器的高度。looploop如果出现该属性，则当音频文件完成播放后再次开始播放。preloa
3、dpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。知识准备3.source标签n source标签：没有一种视频格式或音频格式让所有的浏览器都支持，source标签用于指定多个备用的不同格式文件的路径，浏览器将使用第一个可识别的格式。您的浏览器不支持该播放文件。您的浏览器不支持该播放文件。知识准备4.视频与音频的DOM操作video和audio的方法方法含义load()加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件。play()播放媒体文件。如果视频没有加载，则加载并播放；如果视频是暂停的，则变为播放。
4、pause()暂停播放媒体文件。canPlayType()测试浏览器是否支持指定的媒体类型。知识准备video和audio的属性属性含义currentSrc返回当前媒体的 URL。currentTime设置或返回媒体中的当前播放位置（以秒计）。duration返回媒体的长度（以秒计）。ended返回媒体的播放是否已结束。error返回表示媒体错误状态的 MediaError 对象。paused设置或返回媒体是否暂停。muted设置或返回是否关闭声音。volume设置或返回媒体的音量。height设置或返回媒体的高度值。width设置或返回媒体的宽度值。知识准备video和audio的事件事件含
5、义play当执行方法play()时触发。playing正在播放时触发。pause当执行了方法pause()时触发。timeupdate当播放位置被改变时触发。ended当播放结束后停止播放时触发。waiting在等待加载下一帧时触发。ratechange当媒体的播放速度已更改时触发。volumechange当音量已更改时触发。canplay当浏览器可以播放媒体时触发。canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时触发。知识准备video和audio的事件事件含义durationchange当媒体的时长已更改时触发。loadstart当浏览器开始查找媒体时触发。prog
6、ress当浏览器正在下载媒体时触发。suspend当浏览器刻意不获取媒体数据时触发。abort当媒体的加载已放弃时触发。error当在媒体加载期间发生错误时触发。emptied当目前的播放列表为空时触发。stalled当浏览器尝试获取媒体数据，但数据不可用时触发。loadedmetadata当浏览器已加载媒体的元数据时触发。loadeddata当浏览器已加载媒体的当前帧时触发。seeked当用户已移动/跳跃到媒体中的新位置时触发。seeking当用户开始移动/跳跃到媒体中的新位置时触发。实战演练案例描述：设计并制作音乐播放器，网页效果和布局图如下。制作音乐播放器强化训练案例描述：设计并制作视频播放网页，网页效果和布局图如下。制作视频播放网页任务小结01嵌入视频02嵌入音频03DOM操作课后实训 制作如图所示的视频播放器。视频播放器没有控制栏，通过“播放/暂停”按钮控制。同时，“放大”按钮可以放大视频，“缩小”按钮可以缩小视频，“普通”按钮可以还原视频至默认大小。谢谢观看
