《Web前端开发技术》_第4章 多媒体技术.pptxVIP

学习目标/Target熟悉HTML5多媒体特性。了解HTML5支持的音频和视频格式。掌握HTML5中视频的相关属性，能够在HTML5页面中添加视频文件。掌握HTML5中音频的相关属性，能够在HTML5页面中添加音频文件。了解HTML5中视频、音频的一些常见操作，并能够应用到网页制作中。

章节概述/Summary在网页设计中，多媒体技术主要是指在网页上运用音频视频传递信息的一种方式。在网络传输速度越来越快的今天，音频和视频技术已经被越来越广泛的应用在网页设计中，比起静态的图片和文字，音频和视频可以为用户提供更直观、丰富的信息。本章将对HTML5多媒体的特性以及创建音频和视频的方法进行详细讲解。

目录/Contents01HTML5多媒体的特性02多媒体的支持条件03嵌入视频和音频04CSS控制视频的宽高

目录/Contents05视频和音频的方法和事件06HTML5音视频发展趋势07阶段案例——制作音乐播放界面

HTML5多媒体的特性01

8.1HTML5多媒体的特性了解HTML5多媒体的特性。能够说出HTML5嵌入音视频的优势。学习目标

8.1HTML5多媒体的特性在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。运用HTML5中新增的video标签和audio标签可以避免这样的问题。复杂冗长

多媒体的支持条件02

8.2多媒体的支持条件了解视频和频频的编解码器，能够通过视频和音频编解码器对视频和音频文件进行压缩。学习目标1.视频和音频编解码器

8.2多媒体的支持条件1.视频和音频编解码器由于视频和音频的原始数据一般都比较大，如果不对其进行编码就放到互联网上，传播时会消耗大量时间，无法实现流畅的传输或播放。通过视频和音频编解码器对视频和音频文件进行压缩，就可以实现视频和音频的正常传输和播放。

8.2多媒体的支持条件1.视频和音频编解码器视频编解码器音频编解码器视频编解码器定义了多媒体数据流编码和解码的算法。其中编码器主要是对数据流进行编码操作，用于存储和传输。H.264H.264是国际标准化组织（ISO）和国际电信联盟（ITU）共同提出的继MPEG4之后的新一代数字视频压缩格式。TheoraTheora是免费开放的视频压缩编码技术，可以支持从VP3HD高清到MPEG-4/DiVX视频格式。VP8VP8是第八代的On2视频，能以更少的数据提供更高质量的视频，而且只需较小的处理能力即可播放视频。

8.2多媒体的支持条件1.视频和音频编解码器视频编解码器音频编解码器音频编解码器定义了音频数据流编码和解码的算法。音频编码器主要用于对数据流进行编码操作，解码器主要用于对音频文件进行解码。ACCACC是高级音频编码（英文：AdvancedAudioCoding）的简称，该音频编码是基于MPEG-2的音频编码技术，目的是取代MP3格式。MP3MP3是“MPEG-1音频层3”的简称。它被设计用来大幅度地降低音频数据量。OggOgg全称为OggVorbis，是一种新的音频压缩格式，类似于MP3等现有的音乐格式。OGGVorbis有一个很出众的特点，就是支持多声道。

8.2多媒体的支持条件了解HTML5中视频和音频的一些常见格式，能够正确选择视频和音频格式，使视频和音频在页面中正常播放。学习目标2.多媒体格式

8.2多媒体的支持条件2.多媒体格式运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。视频格式包含视频编码、音频编码和容器格式。视频格式1音频格式是指要在计算机内播放或是处理音频文件。音频格式2

8.2多媒体的支持条件2.多媒体格式视频格式OggMPEGWebM

8.2多媒体的支持条件2.多媒体格式音频格式VorbisMP3Wav

8.2多媒体的支持条件3.支持视频和音频的浏览器熟悉支持视频和音频的浏览器，能够列举各主流浏览器对video和audio元素的支持情况。学习目标

8.2多媒体的支持条件3.支持视频和音频的浏览器很多浏览器已经实现了对HTML5中video和audio元素的支持。浏览器支持版本IE9.0及以上版本Frefox3.5及以上版本Opear10.5及以上版本Chrome3.0及以上版本Safari3.2及以上版本

嵌入视频和音频03

8.3嵌入视频和音频通过上一节的学习，相信读者对HTML5中视频和音频的相关知识有了初步了解。接下来本节将进一步讲解视频和音频的嵌入方法以及多媒体文件的调用，使读者能够熟练运用video元素和audio元素创建视频音频文件。

8.3嵌入视频和音频1.在HTML5中嵌入视