响应式Web开发项目化教程（HTML5+CSS3） 课件 项目7 制作视频播放页面

项目7

制作视频播放页面·多媒体的格式

·支持视频和音频的浏览器

·嵌入视频·HTMLDOMVideo对象·嵌入音频·HTMLDOMAudio对象·视频、音频中的source元素

学习目标能力知识素质掌握HTML5为Video和Audio对象提供的方法和事件。1会在网页中嵌入音频、视频2勇于创新、积极探索的职业精神。3目录多媒体的格式支持视频和音频的浏览器嵌入视频7.17.27.3HTMLDOMVideo对象7.4嵌入音频7.5HTMLDOMAudio对象7.6视频、音频中的source元素7.7项目实践7.87.1

多媒体的格式①Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件。②MPEG4：带有H.264视频编码和AAC音频编码的MPEG4文件。③WebM：带有VP8视频编码和Vorbis音频编码的WebM文件。视频格式◐在HTML5中嵌入的音频格式有以下3种：◐在HTML5中嵌入的视频格式有以下3种：①Vorbis：类似AAC的另一种免费、开源的音频编码，用于替代MP3的下一代音频压缩技术。②MP3：一种音频压缩技术，用来大幅度地减少音频数据量。③Wav：在录音时使用的标准的Windows文件格式，属于一种无损的音乐格式。音频格式7.2

支持视频和音频的浏览器目前，大多数浏览器已经实现了对HTML5中视频和音频元素的支持，如IE9.0及以上版本、Firefox3.5及以上版本、Opear10.5及以上版本、Chrome3.0及以上版本、Safari3.2及以上版本。虽然各主流浏览器都支持HTML5中的视频和音频元素，但在不同的浏览器上显示的效果略有不同，这是每一个浏览器对内置视频控件样式的不同而造成的。7.3

嵌入视频语法格式<videosrc="视频文件路径"controls="controls"></video>嵌入视频在HTML5中，使用<video>标记来定义视频播放器，它不仅是一个播放视频的元素，其控制栏还实现了包括播放、暂停、进度、音量控制和全屏显示等功能，用户可以自定义这些功能的样式。注意：src属性用于设置视频文件的路径，controls属性用于为视频提供播放控件，src属性和controls属性是<video>标记的基本属性，除此之外，<video>标记还有autoplay属性（当页面载入完成后自动播放视频）、loop属性（视频结束时重新开始播放）、preload属性（如果使用该属性，则视频在页面加载时进行加载，并预备播放；如果使用autoplay属性，则忽略该属性）、poster属性（当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来）、width属性（设置视频播放的宽度）、height（设置视频播放的高度）。另外，在<video>标记和</video>标记之间还可以插入文字，用于在浏览器不支持视频播放时显示。7.4

HTMLDOMVideo对象HTML5为Video对象提供了用于DOM操作的方法和事件方法描述addTextTrack()向视频添加新的文本轨道canPlayType()检查浏览器是否能够播放指定的视频类型load()重新加载视频元素play()开始播放视频pause()暂停当前播放的视频Video对象的常用方法及描述7.4

HTMLDOMVideo对象属性描述autoplay设置是否在就绪（加载完成）后随即播放视频currentSrc返回当前视频的URLcurrentTime设置或返回视频中的当前播放位置（以秒计）duration返回视频的长度（以秒计）ended返回视频的播放是否已结束error返回表示视频错误状态的MediaError对象height设置或返回视频的height属性的值loop设置视频是否应在结束时再次播放paused设置视频是否暂停src设置或返回视频的src属性的值volume设置或返回视频的音量width设置或返回视频的width属性的值Video对象用于DOM操作的常用属性及描述7.4

HTMLDOMVideo对象事件描述play当执行方法play()时触发playing正在播放时触发pause当执行方法pause()时触发ended当播放结束后，停止播放时触发waiting在等待加载下一帧时触发error当获取媒体的过程中出错时触发Video对象用于DOM操作的常用事件及描述7.5

嵌入音频语法格式<audiosrc="音频文件路径"controls="controls"></audio>嵌入音频在HTML5中，使用<audio>标记来定义音频播放器。注意：上述语法格式中，src属性用于设置音频文件的路径，controls属性用于为音频提供播放控件，src属性和controls属性是<audio>标记的基本属性除此之外，<audio>标记还有autoplay属性（当页面载入完成后自动播放音频）、loop属性（音频结束时重新开始播放）、preload属性（如果使用该属性，则音频在页面加载时进行加载，并预备播放；如果使用autoplay属性，则忽略该属性）。另外，在<audio>标记和</audio>标记之间还可以插入文字，用于在浏览器不支持音频播放时显示。

7.6

HTMLDOMAudio对象HTML5为Audio对象提供了用于DOM操作的方法和事件方法描述canPlayType()测试浏览器是否支持指定的媒体类型load()重新加载音频元素play()开始播放音频pause()暂停当前播放的音频Audio对象的常用方法及描述7.6

HTMLDOMAudio对象属性描述currentSrc返回当前音频的URLcurrentTime设置或返回音频中的当前播放位置（以秒计）duration返回音频的长度（以秒计）ended返回音频的播放是否已结束error返回表示音频错误状态的MediaError对象paused设置或返回音频是否暂停muted设置或返回是否关闭声音volume设置或返回音频的音量Audio对象用于DOM操作的常用属性及描述7.6

HTMLDOMAudio对象事件描述play当执行方法play()时触发playing正在播放时触发pause当执行方法pause()时触发ended当播放结束后，停止播放时触发waiting在等待加载下一帧时触发error当获取媒体的过程中出错时触发Audio对象用于DOM操作的常用事件及描述7.7

视频、音频中的source元素语法格式<videocontrols="controls"><sourcesrc="视频文件地址"type="媒体文件类型/格式"><sourcesrc="视频文件地址"type="媒体文件类型/格式">……</video>虽然大多数浏览器都支持HTML5的视频和音频元素，但还有一小部分浏览器不支持，为了使视频和音频能够在各个浏览器中正常播放，我们往往需要提供多种格式的视频和音频文件。在HTML5中，使用source元素可以为video元素或audio元素提供多个备选文件。◐使用source元素添加视频的语法格式7.7

视频、音频中的source元素语法格式<audiocontrols="controls"><sourcesrc="音频文件地址"type="媒体文件类型/格式"><sourcesrc="音频文件地址"type="媒体文件类型/格式">……