模块七 音频和视频 (2).pptx

主讲：周怡燕响应式WEB应用开发（HTML5+CSS3）网页设计

模块七音频和视频video标签的使用01audio标签的使用02项目实施0333

项目六卖家运营中心

video标签的使用/01

video标签的使用5在HTML5之前，网页中只能处理文字和图像数据，在HTML5中为网页提供了处理视频数据的能力，使用video标签来定义视频播放器，它的功能不仅仅是一个标签而已，video标签的控制栏，实现了包括播放、暂停、进度和音量控制、全屏等功能，更重要的是我们可以自定义这些功能和控制栏的样式。视频可以理解为一系列连续的图片，video标签的使用方法与img标签非常相似。具体语法如下所示：videosrc=视频文件路径“controls=controls 您的浏览器不支持video标签/video为视频提供播放控件在浏览器不支持时显示

video标签的使用6video标签的用于控制视频播放的常用属性如下所示。属性允许取值取值说明autoplay?autoplay如果出现该属性，则视频在就绪后马上播放。?controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。height?pixels设置视频播放器的高度。looploop如果出现该属性，则当媒体文件播放完后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。srcurl要播放的视频的URL。widthpixels设置视频播放器的宽度。

video标签的使用7使用img标签时会涉及到图片格式的问题，如jpg、gif等，视频文件也有不同的格式，video标签支持三种视频格式，具体如下：带有Theora视频编码和Vorbis音频编码的Ogg文件。带有H.264视频编码和AAC音频编码的MPEG4文件。带有VP8视频编码和Vorbis音频编码的WebM文件。视频格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0Ogg?支持支持支持?MPEG4支持??支持支持WebM?支持支持支持?浏览器支持情况

video标签的使用8目前为止没有一种视频格式让所有浏览器都支持，为此，HTML5中提供了source标签，用于指定多个备用的不同格式的文件的路径，语法如下所示：videocontrols sourcesrc=视频文件地址type=媒体文件类型/格式 sourcesrc=视频文件地址type=媒体文件类型/格式 ……/videosource标签对于音频文件同样适用，需要把video改成audio。

video标签的使用9HTMLDOMVideo对象试一试事件描述play当执行方法play()时触发。playing正在播放时触发。pause当执行了方法pause()时触发。timeupdate当播放位置被改变时触发。ended当播放结束后停止播放时触发。waiting在等待加载下一帧时触发。

video标签的使用10HTML5为Video对象提供了用于DOM操作的方法和事件，以及Video对象的常用属性，这些都需要掌握，接下来将对这部分内容一一进行介绍。HTMLDOMVideo对象Video对象的常用方法方法描述load()加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件。play()播放媒体文件。如果视频没有加载，则加载并播放；如果视频是暂停的，则变为播放。pause()暂停播放媒体文件。canPlayType()测试浏览器是否支持指定的媒体类型。

video标签的使用11HTMLDOMVideo对象Video对象的常用属性属性描述currentSrc返回当前视频的URL。currentTime设置或返回视频中的当前播放位置（以秒计）。duration返回视频的长度（以秒计）。ended返回视频的播放是否已结束。error返回表示视频错误状态的MediaError对象。paused设置或返回视频是否暂停。muted设置或返回是否关闭声音。volume设置或返回视频的音量。height设置或返回视频的高度值。width设置或返回视频的宽度值。

video标签的使用12HTMLDOMVideo对象Video对象的常用事件事件描述play当执行方法play()时触发。playing正在播放时触发。pause当执行了方法pause()时触发。timeupdate当播放位置被改变时触发。ended当播放结束后停止播放时触发。waiting在等待加载下一帧时触发。

audio标签的使用/02

a