第6章---使用HTML5在网页中嵌入视频和音频.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,6.1,使用,标签,网页中嵌入音频和视频是越来越常见了，也使网页内容也越来越精彩。通过,标签可以将音频嵌入网页中，还可以插入许多不同格式的视频文件。,标签在,HTML 4.01,中就已经存在，在,HTML 5,中依然支持该标签。,使用,标签嵌入,音频,将音频文件嵌入到网页中，在网页中嵌入音频可以在网页上显示播放器的外观，包括播放、暂停、停止、音量及声音文件的开始和结束等控制按钮。使用,标签即可在网页中嵌入音频文件。,实战练习,在网页中嵌入音频,使用,标签嵌入视频,在网页中可以插入许多普通格式的视频文件，例如,WMV,和,AVI,等格式的视频文件。在网页中插入视频可以在网页上显示播放器外观，包括播放、暂停、停止和音量等控制按钮。,实战练习,在网页中嵌入视频,最终文件：光盘,最终文件,第,6,章,6-1-1.html,视频：光盘,视频,第,6,章,6-1-1.swf,最终文件：光盘,最终文件,第,6,章,6-1-2.html,视频：光盘,视频,第,6,章,6-1-2.swf,在线多媒体的,发展,在,HTML 5,之前，要在网页中添加音频和视频，最简单、最直接的方法就是使用,Flash,。这种实现方式的缺点是代码较长，最重要的是需要安装,Flash,插件，并非所有浏览器都拥有同样的插件。,在,HTML 5,中，不但不需要安装其他插件，而且实现还很简单。插放一个视频只需要一行,代码。,音频和视频编,解码器,编解码器是一个算法代码，用来处理视频、音频或者其元素数据的编码格式。对音频或视频文件进行编码，可使得文件大大缩小，方便在因特网上传输，因为在网络多媒体发展方面，网络宽带是一个很大的,瓶颈,。,功能缺陷及未来趋势器,直到现在，仍然不存在完整的音频和视频标准。尽管,HTML 5,提供了音频和视频的规范，但其中所涉及的内容还不够完善。,6.2,HTML 5,多媒体基础,HTML 5,对多媒体的支持是顺势发展，只是目前还没有规范得很完整，各种浏览器的支持，差别也很大，如何深入理解,HTML 5,的多媒体内容，有必要对其相关的多媒体技术有一定的了解。,标签所支持的音频格式,目前，,HTML 5,新增的,Audio,元素所支持的音频格式主要是,MP3,、,Wav,和,Ogg,。,使用,标签,在,HTML 5,中新增了,标签，通过该标签可以在网页中嵌入音频并播放。在网页中使用,HTML5,中的,标签嵌入音频时，只需要指定,标签中的,src,属性值为一个音频源文件的路径就可以,了。,实战练习,在网页中嵌入音频播放,6.3,在网页中使用,HTML5,音频,网络上有许多不同格式的音频文件，但,HTML,标签所支持的音乐格式并不是很多，并且不同的浏览器支持的格式也不相同。,HTML 5,针对这种情况，新增了,标签来统一网页音频格式，可以直接使用该标签在网页中添加相应格式的音乐。,最终文件：光盘,最终文件,第,6,章,6-3-2.html,视频：光盘,视频,第,6,章,6-3-2.swf,标签所支持的音频格式,目前，,HTML 5,新增的,Video,元素所支持的视频格式主要是,MPEG4,、,WebM,和,Ogg,。,使用,标签,在网页中可以使用,HTML 5,新增的,Video,元素嵌入视频，其方法与,Audio,元素相似，还可以在,标签中添加,width,和,height,属性设置，从而控制视频的宽度和,高度。,实战练习,在网页中嵌入视频播放,6.4,在网页中使用,HTML5,视频,视频标签的出现无疑是,HTML 5,的一大亮点，但是旧的浏览器不支持,HTML 5 Video,，并且，涉及到视频文件的格式问题，,Firefox,、,Safari,和,Chrome,的支持方式并不相同，所以，在现阶段要想使用,HTML 5,的视频功能，浏览器兼容性是一个不得不考虑的问题。,最终文件：光盘,最终文件,第,6,章,6-4-2.html,视频：光盘,视频,第,6,章,6-4-2.swf,使用,标签,由于各种浏览器对音频和视频的编解码器的支持不一样，为了能够在各种浏览器中都能正常显示音频和视频效果，可以提供多种不同格式的音频和视频文件。这就需要使用,标签为,audio,元素或,video,元素提供多个备用多媒体,文件。,检查浏览器是否支持,audio,和,video,元素,可以使用脚本代码来判断浏览器是否支持,audio,元素或者,video,元素。可以使用脚本代码动态地创建它，并检测是否存在，脚本代码如下。,var support=!document.createElement(“audio”).canPlayType;,6.5,与,标签的属性,在,HTML 5,新增的,与,标签中都提供了相应的属性，通过在标签中添加相应的属性设置，可以对页面中的音频和视频进行设置。在,与,标签中所提供的属性可以大致分为标签属性（,attributes,）和接口属性（,properties,）。,元素的标签,属性,与,标签所提供的元素标签属性基本相同，主要用于为网页标签。,元素的接口,属性,与,标签除了提供了标签属性外，还提供了一些接口属性，用于针音频和视频文件的编程,。,实战练习,实现视频的,快进,最终文件：光盘,最终文件,第,6,章,6-5-2.html,视频：光盘,视频,第,6,章,6-5-2.swf,6.6,与,标签的方法和事件,HTML 5,为,audio,与,video,元素还提供了接口方法和一系列接口事件，方便通过脚本代码对嵌入到网页中的音频和视频进行控制，本节将向读者介绍,audio,和,video,元素的接口方法和接口事件。,与,标签的接口,方法,实战,练习,控制视频的播放和暂停,最终文件：光盘,最终文件,第,6,章,6-6-1.html,视频：光盘,视频,第,6,章,6-6-1.swf,与,标签的,事件,在使用,audio,和,video,元素读取或播放媒体文件的时候，会触发一系列的事件，可以用,JavaScript,脚本来捕获这些事件，并进行相应的处理。,捕获事件有两种方法：一种是添加事件句柄；一种是监听。,实战练习,自定义视频播放控制组件,最终文件：光盘,最终文件,第,6,章,6-6-2.html,视频：光盘,视频,第,6,章,6-6-2.swf,本章主要讲解了,HTML 5,的音频和视频在互联网方面的发展，以及接口中的属性、方法和事件。重点介绍了音频和视频的基础知识，还有,HTML 5,提供的音频和视频的接口及如何使用这些接口。其中音频和视频都包含两类属性，容易混淆，所以读者一定要特别注意，认真地阅读本章，准确的理解和掌握使用,HTML 5,在网页中嵌入视频和音频的方法和技巧。,6.7,本章小结,