HTML5+CSS3网页设计基础-第十一章-多媒体技术.pptx

1、HTML5+CSS3网页设计基础第11章 多媒体技术第1页第十一章第十一章 多媒体技术多媒体技术本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础第11章 多媒体技术第2页本章概述本章概述l在网页设计中，多媒体技术主要是指网页上运用在网页设计中，多媒体技术主要是指网页上运用音频、视频等传递信息的一种方式。在网络传输音频、视频等传递信息的一种方式。在网络传输速度越来越快的今天，音频和视频技术已经被越速度越来越快的今天，音频和视频技术已经被越来越广泛的应用在网页设计中，比起静态的图片来越广泛的应用在网页设计中，比起静态的图片和文字，音频和视频可以为用户提供更直观、更和文字，音频和视频

2、可以为用户提供更直观、更丰富的信息。本章将对丰富的信息。本章将对HTML5多媒体的特征以及多媒体的特征以及创建音频和视频的方法进行详细讲解创建音频和视频的方法进行详细讲解。HTML5+CSS3网页设计基础第11章 多媒体技术第3页本章的学习目标本章的学习目标l熟悉熟悉HTML5多媒体特性多媒体特性l了解了解HTML5支持的音频和视频格式支持的音频和视频格式l掌握掌握HTML5中视频的相关属性，能够在中视频的相关属性，能够在HTML5页面中添加视频文件。页面中添加视频文件。l掌握掌握HTML5中音频的相关属性，能够在中音频的相关属性，能够在HTML5页面中添加音频文件。页面中添加音频文件。l了解

3、了解HTML5中视频、音频的一些常见操作，并能中视频、音频的一些常见操作，并能够应用到网页制作中够应用到网页制作中。HTML5+CSS3网页设计基础第11章 多媒体技术第4页主要内容主要内容11.1 HTML5多媒体特性多媒体特性11.2 嵌入视频和音频嵌入视频和音频4.3 表格表格样式样式11.3 CSS控制视频的宽高控制视频的宽高11.4 视频和音频的方法和事件视频和音频的方法和事件11.5 实训实训11.6 本章小结本章小结 HTML5+CSS3网页设计基础第11章 多媒体技术第5页11.1 HTML5多媒体特性多媒体特性本节主要内容：本节主要内容：l多媒体格式多媒体格式l支持多媒体的浏

4、览器支持多媒体的浏览器HTML5+CSS3网页设计基础第11章 多媒体技术11.1.1 多媒体格式多媒体格式l1.视频格式视频格式。视频格式包含视频编码、音频编码和容器格视频格式包含视频编码、音频编码和容器格式。在式。在HTML5中嵌入的视频格式主要包括中嵌入的视频格式主要包括Ogg、MPEG4、WebM等，具体介绍如下。等，具体介绍如下。lOgg：带有：带有 Theora 视频编码和视频编码和 Vorbis 音频编码的音频编码的 Ogg 文件，文件，Ogg是完全免费、开放和没有专利限制的。是完全免费、开放和没有专利限制的。lMPEG4：MPEG4是一种网络视频图像压缩编码标准，支是一种网络视

5、频图像压缩编码标准，支持持mpeg4标准的文件格式有很多种，常见的标准的文件格式有很多种，常见的mp4和和avi都都是其中的一种，其中是其中的一种，其中mp4是支持是支持mpeg4的标准的音频视的标准的音频视频文件。频文件。lWebM：WebM是一种开放、免费的媒体文件格式，里面是一种开放、免费的媒体文件格式，里面包括了包括了VP8影片轨和影片轨和 Ogg Vorbis 音轨，并且是基于音轨，并且是基于HTML5标准的标准的第6页HTML5+CSS3网页设计基础第11章 多媒体技术11.1.1 多媒体格式多媒体格式l2.音频格式音频格式l音频格式是指在计算机内播放或处理音频文件。在音频格式是指

6、在计算机内播放或处理音频文件。在HTML5中嵌入的音频格式主要包括中嵌入的音频格式主要包括Ogg Vorbiss、MP3、Wav等，具体介绍如下。等，具体介绍如下。lVorbis:是类似是类似AAC的另一种免费、开源的音频编码，是的另一种免费、开源的音频编码，是用于替代用于替代MP3的下一代音频压缩技术。的下一代音频压缩技术。Ogg全称是全称是OGGVobis(oggVorbis)是一种音频压缩格式，类似于是一种音频压缩格式，类似于MP3等的音乐格式。等的音乐格式。第7页HTML5+CSS3网页设计基础第11章 多媒体技术11.1.1 多媒体格式多媒体格式lMP3：是一种音频压缩技术，其全称是

7、动态影像专家压缩：是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面标准音频层面3（Moving Picture Experts Group Audio Layer），简称为），简称为MP3。它被设计用来大幅度地降低音频。它被设计用来大幅度地降低音频数据量。数据量。lWav：是录影时用的标准的：是录影时用的标准的Windows文件格式，文件的文件格式，文件的扩展名为扩展名为“WAV”，数据本身的格式为，数据本身的格式为PCM或压缩型，属或压缩型，属于无损音乐格式的一种。于无损音乐格式的一种。第8页HTML5+CSS3网页设计基础第11章 多媒体技术11.1.2 支持多媒体的浏览器支持多媒

8、体的浏览器l各浏览器的支持情况如表各浏览器的支持情况如表11-1所示。所示。第9页表11-1 浏览器对video和audio的支持情况浏览器支持版本IE9.0及以上版本Firefox3.5及以上版本Opear10.5及以上版本Chrome3.0及以上版本Safari3.2及以上版本HTML5+CSS3网页设计基础第11章 多媒体技术第10页11.2 嵌入视频和音频嵌入视频和音频本节主要内容：本节主要内容：l在在HTML5中嵌入视频中嵌入视频l在在HTML5中嵌入音频中嵌入音频l音视频中的音视频中的source元素元素HTML5+CSS3网页设计基础第11章 多媒体技术11.2.1 在在HTML

9、5中嵌入视频中嵌入视频在在HTML5中，中，video标签用于在标签用于在HTML5文档中嵌入视频文档中嵌入视频内容，比如电影片段或其他视频流。它支持三种视频格式，内容，比如电影片段或其他视频流。它支持三种视频格式，分别为分别为Ogg、WebM和和MPEG4，其基本语法格式如下。，其基本语法格式如下。文字文字;参数：参数：lsrc属性用于设置视频文件的路径，属性值属性用于设置视频文件的路径，属性值url 是要播放是要播放的视频的的视频的 URL。lcontrols属性用于为视频提供播放控件。属性用于为视频提供播放控件。l参考代码：参考代码：11-2-1.html、11-2-2.html第11页

10、HTML5+CSS3网页设计基础第11章 多媒体技术11.2.1 在在HTML5中嵌入视频中嵌入视频在在video元素中还可以添加其他属性，来进一步优化视频元素中还可以添加其他属性，来进一步优化视频的播放效果，具体如表的播放效果，具体如表11-2所示。所示。第12页值值描述描述autoplay当页面载入完成后自动播放视频loop视频结束时重新开始播放preload如果出现该属性，则视频在页面的加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性。poster当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来muted视频的音频输出被静音pixels设置视

11、频播放器的宽度。pixels设置视频播放器的高度。HTML5+CSS3网页设计基础第11章 多媒体技术11.2.2 在在HTML5中嵌入音频中嵌入音频在在HTML5中，中，audio标签用于在标签用于在HTML5文档中嵌入音频文档中嵌入音频文件，它支持三种音频格式，分别为文件，它支持三种音频格式，分别为Ogg、MP3和和Wav，其，其基本格式如下。基本格式如下。各参数的功能参考各参数的功能参考的参数及说明。的参数及说明。l参考代码：参考代码：11-2-3.html第13页HTML5+CSS3网页设计基础第11章 多媒体技术11.2.2 在在HTML5中嵌入音频中嵌入音频另外，在另外，在audi

12、o元素中还可以添加其他属性，来进一步优元素中还可以添加其他属性，来进一步优化音频的播放效果，具体如表化音频的播放效果，具体如表8-3所示。所示。第14页表11-3 audio元素常见属性属性属性值值描述描述autoplayautoplay当页面载入完成后自动播放音频looploop音频结束时重新开始播放preloadpreload如果出现该属性，则音频在页面的加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性。HTML5+CSS3网页设计基础第11章 多媒体技术11.2.3 音视频中的音视频中的source元素元素1.不同浏览器对音视频文件的支持不同浏览器对音视频文件的支持

13、虽然虽然HTML5支持支持Ogg、MPEG4和和WebM的视频格式以及的视频格式以及Vorbis、MP3和和WAV的音频格式，但各浏览器对这些格式的音频格式，但各浏览器对这些格式却不完全支持，具体如表却不完全支持，具体如表11-4所示所示第15页类型类型格式格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0 视频Ogg 支持支持支持 MPEG4支持 支持支持WebM 支持支持支持 音频Ogg Vorbis 支持支持支持 MP3支持 支持支持WAV 支持支持支持表11-4 不同浏览器对音视频文件的支持HTML5+CSS3网页设计基础第11章 多媒体技术11.2.

14、3 音视频中的音视频中的source元素元素2.多源视频文件的使用多源视频文件的使用为了使音频、视频能够在各个浏览器中正常播放，往往为了使音频、视频能够在各个浏览器中正常播放，往往需要提供多种格式的音频、视频文件。在需要提供多种格式的音频、视频文件。在HTML5中，中，video 元素允许多个元素允许多个 source 元素，每个元素，每个source 元素可以链接不元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。运用同的视频文件，浏览器将使用第一个可识别的格式。运用video元素添加多个视频的基本格式如下。元素添加多个视频的基本格式如下。第16页HTML5+CSS3网页设计基础第

15、11章 多媒体技术11.2.3 音视频中的音视频中的source元素元素3.多源音频文件的使用多源音频文件的使用在在HTML5中，运用中，运用source元素可以为元素可以为audio元素提供多元素提供多个备用文件。运用个备用文件。运用source元素添加多个音频的基本格式如下元素添加多个音频的基本格式如下。第17页HTML5+CSS3网页设计基础第11章 多媒体技术第18页11.3 CSS控制视频的宽高控制视频的宽高在在HTML5中，经常会通过为中，经常会通过为video元素添加宽高的方式元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先给视频预留一定的空间，这样浏览器在

16、加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。接下来本节将对视频的宽高属性进行讲解。生变化。接下来本节将对视频的宽高属性进行讲解。在在HTML5页面上，用页面上，用width和和height属性设置视频文件属性设置视频文件的宽度和高度。的宽度和高度。参考代码：参考代码：11-3-1.htmlHTML5+CSS3网页设计基础第11章 多媒体技术第19页11.4 视频和音频的方法和事件视频和音频的方法和事件本节主要内容：本节主要内容：lvideo和和audio的方法的方法lvideo和和audio的事件的事件HTM

17、L5+CSS3网页设计基础第11章 多媒体技术11.4.1 video和和audio的方法的方法HTML5为为video和和audio提供了接口方法，具体介绍如表提供了接口方法，具体介绍如表8-5所示。所示。第20页表8-5 video和audio的方法方法方法描述描述load（）加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件play()播放媒体文件。如果视频没有加载，则加载并播放；如果视频暂停的，则变为播放 pause()暂停播放媒体文件canPlayType()测试浏览器是否支持指定的媒体类型HTML5+CSS3网页设计基础第11章 多媒体技术11.4.2 v

18、ideo和和audio的事件的事件HTML5还为还为video和和audio元素提供了一系列的接口事件元素提供了一系列的接口事件，具体如表，具体如表8-6所示。所示。第21页表8-6 video和audio的事件方法方法描述描述play当执行方法play()时触发playing正在播放时触发pause当执行了方法pause()时触发timeupdata当播放位置被改变时触发ended当播放结束后停止播放时触发waiting在等待加载下一帧时触发ratechange在当前播放速率改变时触发HTML5+CSS3网页设计基础第11章 多媒体技术11.4.2 video和和audio的事件的事件第22

19、页volumechange在音量改变时触发canplay以当前播放速率，需要缓冲时触发canplaythrough以当前播放速率，不需要缓冲时触发durationchange当播放时长改变时触发loadstart在浏览器开始在网上寻找数据时触发progress当浏览器正在获取媒体文件时触发suspend当浏览器暂停获取媒体文件，且文件获取并没有正常结束时触发abort当中止获取媒体数据时触发。但这种中止不是由错误引起HTML5+CSS3网页设计基础第11章 多媒体技术11.4.2 video和和audio的事件的事件第23页error当获取媒体过程中出错时触发emptied当所在网络变为初始化

20、状态时触发stalled浏览器尝试获取媒体数据失败时触发loadedmetadata 在加载完媒体元数据时触发loadeddata在加载完当前位置的媒体时触发seeking浏览器正在请求数据时触发seeked浏览器停止请求数据时触发HTML5+CSS3网页设计基础第11章 多媒体技术11.5 实训实训l设计音乐视频播放页面设计音乐视频播放页面。l参考代码参考代码 11-5.html第24页HTML5+CSS3网页设计基础第11章 多媒体技术第25页11.6 本章小结本章小结 l本章首先介绍了本章首先介绍了HTML5多媒体特性、多媒体的格式以及多媒体特性、多媒体的格式以及浏览器的支持情况，然后讲解了在浏览器的支持情况，然后讲解了在HTML5页面中嵌入多页面中嵌入多媒体文件的方法，并简单介绍了媒体文件的方法，并简单介绍了HTML5音频和视频的方音频和视频的方法、事件。最后运用所学知识制作了一个音乐视频播放页法、事件。最后运用所学知识制作了一个音乐视频播放页面。面。l通过本章的学习，需要了解通过本章的学习，需要了解HTML5多媒体文件的特性，多媒体文件的特性，熟悉常用的多媒体格式，掌握在页面中嵌入音视频文件的熟悉常用的多媒体格式，掌握在页面中嵌入音视频文件的方法，并将其综合运用到页面的制作中方法，并将其综合运用到页面的制作中。