第11章 网页多媒体设计[36页]

然后进行播放。
• 以下是不同的音频编码格式及其支持的浏览器：
•
AAC [S4、C3、IOS]（Apple公司使用在iTunes Store上的音
频格式）
•
MP3 [IE9、S4、C3、IOS]
•
Vorbis (OGG) [F3、C4、O10]
1Hale Waihona Puke Baidu.1.2 音频和视频编解码器
• 1）高级音频编码（AAC） • 这是 Apple在其 iTunes Store中使用的音频格式。它的设计初衷是，
11.1.2 音频和视频编解码器
• 2. 视频编解码器
• 视频解码器定义了视频数据流编码和解码的算法。编码器主要对数据
流进行编码操作，用于存储和传输。视频播放器对视频文件进行解码，
然后进行播放。
• 以下是不同的视频编码格式及其支持的浏览器：
•
H.264 [IE9、S4、C3、IOS]
•
Theora [F3.5、C4、O10]
本章导读
•
多媒体是互联网中非常重要的一部分，无论访问的是哪种类型的
网页，如果要在Web页面中播放视频或音频文件，必须依赖object和
embed元素，同时饮用flash插件，如果用户没有安装Flash插件，就
不能播放视频，画面也会出现一片空白，使用起来不方便，而且插件
的引用还可能存在页面的安全隐患。
11.1 HTML 5 Audio元素和Video元素概述
• 本章我们重点讨论以下两个元素： • <audio>[audio src=”music.wav”]</audio>——浏览器原
生播放音频。[C4、F3.6、IE9、S3.2、O10.1、IOS3、A2] • <video>[video src=”movie.ogg”]</video>——浏览器原
•
HTML5出现后，新增了两个元素：video元素和audio元素。video
元素专门用来播放网络上的视频或电影，而audio元素专门用来播放
网络上的音频数据。使用这两个元素，就不需要再使用其他的插件了，
只要是支持HTML5的浏览器即可，而且在开发的时候也不需要再书写
复杂的objedt元素和embed元素。
生播放视频。[C4、F3.6、IE9、S3.2、O10.5、IOS3、A2]
11.1.1 视频容器
• 不论是音频文件还是视频文件，实际上都只是一个容器文件，容器就 像是一个外壳，其中包含了音频流和视频流，甚至有时候还包含一些 字幕之类的元数据。这点类似于压缩了一组文件的ZIP文件。视频文 件(视频容器)包含了音频轨道、视频轨道和其他一些元数据。视频播 放的时候，音频轨道和视频轨道是绑定在一起的。元数据部分包含了 该视频的封面、标题、子标题、字幕等相关信息。
• 主流视频容器支持如下视频格式： • Audio Video Interleave (.avi) • Flash Video (.flv) • MPEG 4 (.mp4) • Matroska (.mkv) • Ogg (.ogv)
11.1.2 音频和视频编解码器
• 音频和视频的编码解码器是一组算法，用来对一段特定音频或视频流 进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非
11.1.2 音频和视频编解码器
• 1）高级音频编码（AAC） • 这是 Apple在其 iTunes Store中使用的音频格式。它的设计初衷是，
在相同文件大小的情况下提供比 MP3更好的音质。同H.264类似，AAC 也提供多种音频类。它与H.264的另外一个共同点就是，AAC也不是一 项免费的编码标准，有相应的授权费。 • Apple的所有产品都支持AAC文件，而 Adobe的Flash Player和开源的 VLC播放器也支持它。 • 2）MP3 • 尽管 MP3格式非常普遍和流行，但 Firefox和Opera却不对其提供支 持，因为它也受专利保护。Safari和 Google Chrome支持MP3。 • 3）Vorbis（OGG） • 这是一款开源的免版税格式，Firefox、Opera和Chrome都对其提供支 持。我们可以发现 OGG也可以同 Theora和VP8视频编解码器相配合。 Vorbis文件的音频质量非常好，但是对其提供支持的硬件音乐播放器 却不多。
•
VP8 [IE9如果编解码器已安装、F4、C5、O10.7]
• 1）H.264
• 2）VP8
• 3）Theora
常大，假如不对其编码，那么构成一段视频和音频的数据可能会非常
庞大，以至于在因特网上传播需耗费大量的时间。而如果没有解码器
的，接收方就不能把编码过的数据重组为原始的媒体数据。编解码器
可以读懂特定的容器格式，并且对其中的音频轨道和视频轨道解码。
• 1. 音频编解码器
• 音频解码器定义了音频数据流编码和解码的算法。编码器主要对数据 流进行编码操作，用于存储和传输。音频播放器对音频文件进行解码，
在相同文件大小的情况下提供比 MP3更好的音质。同H.264类似，AAC 也提供多种音频类。它与H.264的另外一个共同点就是，AAC也不是一 项免费的编码标准，有相应的授权费。 • Apple的所有产品都支持AAC文件，而 Adobe的Flash Player和开源的 VLC播放器也支持它。 • 2）MP3 • 尽管 MP3格式非常普遍和流行，但 Firefox和Opera却不对其提供支 持，因为它也受专利保护。Safari和 Google Chrome支持MP3。 • 3）Vorbis（OGG） • 这是一款开源的免版税格式，Firefox、Opera和Chrome都对其提供支 持。我们可以发现 OGG也可以同 Theora和VP8视频编解码器相配合。 Vorbis文件的音频质量非常好，但是对其提供支持的硬件音乐播放器 却不多。
HTML5+CSS3+JavaScript网 页设计项目教程
第11章 网页多媒体设计
第11章 网页多媒体设计
11.1 HTML 5 Audio元素和Video元素概述 11.2 网页中的音频文件 11.3 网页中的视频文件 11.4 多媒体元素常用方法和事件简述 综合实例 —— 使用多媒体元素播放文件 本章小结 练习与实训