Web前端开发技术与实践 第6章:多媒体 阮晓龙 13938213680/ rxl@hactcmeducn http://web.51xueweb.cr 问南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9
Web前端开发技术与实践 第6章：多媒体 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9 1
2 本章主要内容 口多媒体基础 口HTML5音频与视频 口播放控制 口解决兼容性问题 米 口字幕 ¤案例:使用播放器插件实现视频播放 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容 多媒体基础 HTML5音频与视频 播放控制 解决兼容性问题 字幕 案例：使用播放器插件实现视频播放 2
3 1多媒体基础 1.1什么是多媒体 口媒体( Media)是人与人之间实现信息交流的中介,简单地说, 就是信息的载体,也称为媒介。 ¤多媒体( Multimedia)就是多重媒体的意思,可以理解为直接 作用于人感官的文字、图形、图像、动画、声音和视频等各种 媒体的统称,即多种信息载体的表现形式和传递方式 ¤Web上使用的多媒体技术,就是利用计算机把文字、图形、影像、 动画、声音及视频等媒体信息都数位化,并将其整合在一定的 交互式界面上,使计算机具有交互展示不同媒体形态的能力。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.多媒体基础 媒体（Media）是人与人之间实现信息交流的中介，简单地说， 就是信息的载体，也称为媒介。 多媒体（Multimedia）就是多重媒体的意思，可以理解为直接 作用于人感官的文字、图形、图像、动画、声音和视频等各种 媒体的统称，即多种信息载体的表现形式和传递方式。 Web上使用的多媒体技术，就是利用计算机把文字、图形、影像、 动画、声音及视频等媒体信息都数位化，并将其整合在一定的 交互式界面上，使计算机具有交互展示不同媒体形态的能力。 3 1.1什么是多媒体
4 1多媒体基础 1.2音频编码与音频格式 口音频编码: ■将声音调制成模拟信号,通过抽样、量化、编码三个步骤再经算法 的方式将连续变化的模拟信号转换为数字编码。 口音频解码: ■将已经编码好的音频还原成连续变化的模拟信号,并给扬声器传递 声音信号。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.多媒体基础 音频编码： 将声音调制成模拟信号，通过抽样、量化、编码三个步骤再经算法 的方式将连续变化的模拟信号转换为数字编码。 音频解码： 将已经编码好的音频还原成连续变化的模拟信号，并给扬声器传递 声音信号。 4 1.2音频编码与音频格式
1多媒体基础 1.2音频编码与音频格式 口编解码器包括有损和无损两种 ■无损文件太大,不适合在Web中进行播放。 有损编解码器在编码的过程中会丢失一些原来的音频信息。如果希 望编码后的音频能够凊晰,需要有良好的音频源、优秀的编码算法、 高性能的编码软件和怡当的编码参数。 口常见的音频格式 CD、WAVE、AIFF、AU、MPEG、MP3、MPEG4、MIDI、 Realaudio、 VQF、 Ogg Vorbis、AMR、WMA等。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.多媒体基础 编解码器包括有损和无损两种： 无损文件太大，不适合在Web中进行播放。 有损编解码器在编码的过程中会丢失一些原来的音频信息。如果希 望编码后的音频能够清晰，需要有良好的音频源、优秀的编码算法、 高性能的编码软件和恰当的编码参数。 常见的音频格式： CD、WAVE、AIFF、AU、MPEG、MP3、MPEG-4、MIDI、RealAudio、 VQF、OggVorbis、AMR、WMA等。 5 1.2音频编码与音频格式
1多媒体基础 1.3视频编码与视频格式 口视频编码: 通过特定的压缩算法,将某个视频的视频容器转换成另一个视频容 器的方式 口视频解码: ■获取视频容器中的视频、音频等文件并播放的过程。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.多媒体基础 视频编码： 通过特定的压缩算法，将某个视频的视频容器转换成另一个视频容 器的方式。 视频解码： 获取视频容器中的视频、音频等文件并播放的过程。 6 1.3视频编码与视频格式
1多媒体基础 1.3视频编码与视频格式 口视频播放器(解码器)的工作过程: 解析容器格式以找出可以使用的视频和音频轨道,并分析它们的存 储结构,以便接下来的解码工作。 对视频流解码,并在屏幕上显示一幅幅的图像。 对音频流解码,同时给扬声器传输声音信号。 口常见的视频格式 AVI、MPEG、MV、ASF、wMV、NAⅵ、RMB、3GP、REALⅥDEO、FLV、 MKV、F4V、RMVB、WebM等。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.多媒体基础 视频播放器（解码器）的工作过程： 解析容器格式以找出可以使用的视频和音频轨道，并分析它们的存 储结构，以便接下来的解码工作。 对视频流解码，并在屏幕上显示一幅幅的图像。 对音频流解码，同时给扬声器传输声音信号。 常见的视频格式： AVI、MPEG、MOV、ASF、WMV、NAVI、RMVB、3GP、REAL VIDEO、FLV、 MKV、F4V、RMVB、WebM等。 7 1.3视频编码与视频格式
8 1多媒体基础 1.4在web上能够使用的音频和视频格式 表601可在Web上插的音频格式 格式文件 MIDI% usical Instrument Digital Interface)是一种针 MIDI mid. midi 付电子音乐设备(比如合成器和声卡)的格式 含有声音,但包含可被电子产品(比如声卡)播放的数字音乐 格式是由 Realmedia针对因特网开发的。该格式 RealAudio rm,xan也支持视频该格式允许低带宽条件下的音频流(在线音乐 网络音乐)。由于是低带宽优先的,质里常会降低 Wa Wave( wavefor)格式是由IM和微软开发的。所有运行 WaV Windowe的计算机和几乎所有网络浏览器都支持它。 MA格式( Windows Media Audio),质里优于M3,兼容大 多数播放器●w文件可作为连续的数据流来传输,这使它对 于网络电台或在线音乐很实用 M3文件实际上是WEG文件的声音部分 MEG格式最初是由 p3,mpga运动图像专家组开发的3是其中最受欢迎的针对音乐的声 goRbi是一种新的音频压缩格式,类似于MF3等现有的音 乐格式。但有一点不同的是,它是完全免费、开放和没有专利 OggVorbis 限制的。 Vorbis是这种音频压缩机制的名字,而0g则是 个计划的名字,该计划意图设计一个完全开放性的多媒体系 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.多媒体基础 8 1.4在Web上能够使用的音频和视频格式
表602可在Wb上播的频格式 9 格式 文件 靛述 n|=楼毫秘颗 格式,但非 Windows计算机通常不能够擂放 Windows Media格式是由微软开发的。 Windows media在因特 w网上很常见,但是如果未安装额的(免费)组件,就无法播 MPEG wps,, apeg EG oving Pictures Expert Group)格式是因:网上最 行的骆格式。它是跨平台的,得到了所有主流浏览器支持 QuickTim格式是由苹果公司开发的 o QuickTime是因特网上 令 quicklime y|常见的格式但是ikm视频不能在没有安装额的免 费)组件的 Windows计算机上播放 Realvideo格式是由Ra1 Media针对因特网开发的。该格式 Reae.:m.xam允许低带宽条件下(在线视频、网络电视)的视频由于是 带宽优先的,质里常会降低 ,| ash(shockwave式是贴 romeria开发的okm格 式儒需要额外的組件来播放。 由 Google提出,是一个开放、免费的蝶体文件格式。WebM格 式淇其实是以 Matroska(即M)容器格式为基础开发的新容器 格式,里面包括了vP影片轨和0 g Vorbis音轨,其中Gog1 将其拥有W8视频扁技术以类似BD授权开源, gg Vorbis WebM vehm|本来就是开放格式。丽标路视频更加偏向于开源并 且是基于HM5标住的,weM项目旨在为梅每个人都开的 國蛤络开发高质里、开频格式,其重点是解夫视频服务这 核心的网络用户体验。WM的格式相当有效率,可以在 netbook、 tablet、手持式装置等上面畅地使用 eg4 with H264 video compression)是种对 的新格式。事实上, YouTube推荐使用M4 o Youtube接收多 种格式,然后全部转专换为f1v或=4以供分发°越来越多的 视频发布者转到M4,将其作为F1ah擂放器和HM5的因脖 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 9
10 1多媒体基础 1.5如何在Web上播放视频 口在HTM5出现之前,向网页中嵌入视频是一件非常麻烦的事,需 要引入 Flash并且只能使用和元素来进行。 口这样的嵌入方式的特点 ■给Web前端开发者的开发带来了一定的困难。 使得用户在进行视频播放的时候必须安装 Flash的浏览器插件才可 以播放视频,不方便用户的使用。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.多媒体基础 10 1.5如何在Web上播放视频 在HTML5出现之前，向网页中嵌入视频是一件非常麻烦的事，需 要引入Flash并且只能使用和元素来进行。 这样的嵌入方式的特点： 给Web前端开发者的开发带来了一定的困难。 使得用户在进行视频播放的时候必须安装Flash的浏览器插件才可 以播放视频，不方便用户的使用