《Web前端开发》课程理论教学部分 第九讲:音频与视频 学时计划:2学时理论,1学时实验 (实验四:在网页中使用表单和多媒体) 教学大纲: 1、从网络上的视频说起 2、 video和 audio元素 3、 video和 audio的属性 4、 video和 audio的方法 5、 video和 audio的事件 6、案例:拍个DV让大家看 7、讨论与思考 互联网的飞速发展和网络速度的改善,使得视频和音频已经成为 了互联网内容的重要形式之一,并且视频和音频的网络传输,也极大 地推动了互联网应用的发展。今天通过优酷、土豆、乐视、CNTV等 网站观看电影、电视剧和综艺节目,成为人们使用互联网的主要应用 视频和音频的广泛应用,使得在网络中使用视频和音频技术变得 越加重要。本讲将讨论视频和音频的容器文件和编解码器,以及HTM 5对视频和音频方面的新技术,以帮助读者创建丰富多彩的多媒体互 联冈应用服务。 、从网络上的视频说超 在HIML5规范之前,如果希望在网页上播放视频、音频,通畅 都需要借助第三方插件,比如 Flash。或者需要自主开发使用多媒体 播放插件。但是无论哪种方式,都需要在浏览器或者计算机中安装插 件或者播放器。对于视频和音频的支持,并不是由浏览器自身来提供 支持的,这种做法复杂且麻烦,还容易产生兼容性和安全性的问题。 HTML5定义了一个在网页中嵌入视频和音频的标准方式,就是 1《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51 xuewebcn
1 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 《Web 前端开发》课程理论教学部分 第九讲：音频与视频 学时计划：2 学时 理论，1 学时 实验 （实验四：在网页中使用表单和多媒体） 教学大纲： 1、从网络上的视频说起 2、video 和 audio 元素 3、video 和 audio 的属性 4、video 和 audio 的方法 5、video 和 audio 的事件 6、案例：拍个 DV 让大家看 7、讨论与思考 互联网的飞速发展和网络速度的改善，使得视频和音频已经成为 了互联网内容的重要形式之一，并且视频和音频的网络传输，也极大 地推动了互联网应用的发展。今天通过优酷、土豆、乐视、CNTV 等 网站观看电影、电视剧和综艺节目，成为人们使用互联网的主要应用 之一。 视频和音频的广泛应用，使得在网络中使用视频和音频技术变得 越加重要。本讲将讨论视频和音频的容器文件和编解码器，以及 HTML 5 对视频和音频方面的新技术，以帮助读者创建丰富多彩的多媒体互 联网应用服务。 一、从网络上的视频说起 在 HTML 5 规范之前，如果希望在网页上播放视频、音频，通畅 都需要借助第三方插件，比如 Flash。或者需要自主开发使用多媒体 播放插件。但是无论哪种方式，都需要在浏览器或者计算机中安装插 件或者播放器。对于视频和音频的支持，并不是由浏览器自身来提供 支持的，这种做法复杂且麻烦，还容易产生兼容性和安全性的问题。 HTML 5 定义了一个在网页中嵌入视频和音频的标准方式，就是
使用和元素。虽然目前此部分的工作还不够完善,但 是已经取得了浏览器的广泛支持和认可。 1.1视频容器 不论是视频文件还是音频文件,例如.avi、flv等,实质上都 是一个容器文件。这个容器文件就如同.zip文件一样。视频文件(视 频容器)包含了音频轨道、视频轨道和其他一些元数据。当进行视频 播放时,音频轨道和视频轨道是绑定在一起的。元数据部分包含了视 频的封面图片、标题、子标题、字幕等信息。 视频容器有很多中,较为常见的如下所示 (1)MPEG-4(.mp4) (2) Flash Video ( flv) (3)0gg ( ogv (4) WebM(. webm (5)Audio Video Interleave ( avi) (6) Matroska ( mky) 1.2音频和视频的编解码器 音频和视频的编码/解码器是一组算法,用来对一段特定音频或 视频进行解码和编码,以便音频和视频能够播放。 当观看一个视频的时候,视频播放器(解码器)需要完成的工作 有 第一步:解析容器格式以找出可以使用的视频和音频轨道,并分 析它们的存储结构,以便接下来的解码工作。 第二步:对视频流解码,并在屏幕上显示一幅幅的图像。 第三步:对音频流解码,同时给扬声器传输声音信号。 编解码器包括有损和无损两种。无损视频文件一般太大了,在网 页中没有优势,所以在网络上传送的视频釆用的都是有损编解码器 有损视频编解码器中,信息在编码过程的丢失时无法避免的。这就好 比从一个磁带复制音频,每次复制都会丢失一些原来音频的信息,复 制音频的质量也会越来越差。因此如果希望编码后的视频能够清晰, 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 使用和元素。虽然目前此部分的工作还不够完善，但 是已经取得了浏览器的广泛支持和认可。 1.1 视频容器 不论是视频文件还是音频文件，例如.avi、.flv 等，实质上都 是一个容器文件。这个容器文件就如同.zip 文件一样。视频文件（视 频容器）包含了音频轨道、视频轨道和其他一些元数据。当进行视频 播放时，音频轨道和视频轨道是绑定在一起的。元数据部分包含了视 频的封面图片、标题、子标题、字幕等信息。 视频容器有很多中，较为常见的如下所示： （1）MPEG-4（.mp4） （2）Flash Video（.flv） （3）Ogg（.ogv） （4）WebM（.webm） （5）Audio Video Interleave（.avi） （6）Matroska（.mkv） 1.2 音频和视频的编解码器 音频和视频的编码/解码器是一组算法，用来对一段特定音频或 视频进行解码和编码，以便音频和视频能够播放。 当观看一个视频的时候，视频播放器（解码器）需要完成的工作 有： 第一步：解析容器格式以找出可以使用的视频和音频轨道，并分 析它们的存储结构，以便接下来的解码工作。 第二步：对视频流解码，并在屏幕上显示一幅幅的图像。 第三步：对音频流解码，同时给扬声器传输声音信号。 编解码器包括有损和无损两种。无损视频文件一般太大了，在网 页中没有优势，所以在网络上传送的视频采用的都是有损编解码器。 有损视频编解码器中，信息在编码过程的丢失时无法避免的。这就好 比从一个磁带复制音频，每次复制都会丢失一些原来音频的信息，复 制音频的质量也会越来越差。因此如果希望编码后的视频能够清晰
且希望得到最好的编码效率,需要有一个良好的视频源、优秀的编码 算法、高性能的编码软件和恰当的编码参数。 音频和视频的编码算法很多,常见的有 音频编解码器有:AAC、MPEG-3、0 gg Vorbis 视频编解码器有:H.264、VP8、 Ogg theora。 有些编码器是受专利保护的,有些则是免费的。例如 Vorbis Theora是免费的,可以随意使用,而H.264、MPEG-4就需要支付专 利费用。 延伸阅读:WebM WebM由 Google于2010年5月发布,是一个开放、免费的媒体文件格式 现在主流的wveb媒体都比较模糊,作为新的音频和视频格式,WebM旨在改 善这种现状,让Web视频清晰化。WebM的后缀名是webm。 WebM格式其实是以 Matroska(即MKVv)容器格式为基础开发的新容器格 式,里面包括了VP8编码器和 Ogg Vorbis音频编码器,其中 Google将其拥 有的VP8视频编码技术以类似BSD授权开源, Ogg Vorbis本来就是开放格 式。 Google以不受限制许可的方式发布了WebM的规范和软件,包括源码和 专利权。 WebM标准的编解码器更加偏向于开源并且是基于HTML5标准的,WebM项 目旨在为对每个人都开放的网络开发高质量、开放的视频格式,其重点是解决 视频服务这一核心的网络用户体验。 1.3HTML5 Audio和 Video的限制 虽然HTML5增加了音频和视频的元素,但是有些功能目前仍然 没有得到HTML5的支持。 (1)流式音频和视频。目前HTML5中没有视频比特率切换的标 准,所以HTML5对视频的支持只限于加载的全部媒体文件。 (2)ⅢML5的媒体受到HTTP跨源资源共享的限制 (3)ⅢTML5自身无法在视频全屏播放时进行脚本控制。这个功 能的缺失是出于安全的考虑,但是可以通过浏览器自身的功能进行解 决。 1.4浏览器对HTML5的 Audio和 Video元素的支持 由于音频和视频的解码是有浏览器来进行的,因为除了了解浏览 器对 Audio和 Video元素的支持外,还需要知道浏览器支持的编解码 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 且希望得到最好的编码效率，需要有一个良好的视频源、优秀的编码 算法、高性能的编码软件和恰当的编码参数。 音频和视频的编码算法很多，常见的有： 音频编解码器有：AAC、MPEG-3、Ogg Vorbis。 视频编解码器有：H.264、VP8、Ogg Theora。 有些编码器是受专利保护的，有些则是免费的。例如 Vorbis、 Theora 是免费的，可以随意使用，而 H.264、MPEG-4 就需要支付专 利费用。 延伸阅读：WebM WebM 由 Google 于 2010 年 5 月发布，是一个开放、免费的媒体文件格式。 现在主流的 Web 媒体都比较模糊，作为新的音频和视频格式，WebM 旨在改 善这种现状，让 Web 视频清晰化。WebM 的后缀名是.webm。 WebM 格式其实是以 Matroska（即 MKV）容器格式为基础开发的新容器格 式，里面包括了 VP8 编码器和 Ogg Vorbis 音频编码器，其中 Google 将其拥 有的 VP8 视频编码技术以类似 BSD 授权开源，Ogg Vorbis 本来就是开放格 式。Google 以不受限制许可的方式发布了 WebM 的规范和软件，包括源码和 专利权。 WebM 标准的编解码器更加偏向于开源并且是基于 HTML5 标准的，WebM 项 目旨在为对每个人都开放的网络开发高质量、开放的视频格式，其重点是解决 视频服务这一核心的网络用户体验。 1.3HTML 5 Audio 和 Video 的限制 虽然 HTML 5 增加了音频和视频的元素，但是有些功能目前仍然 没有得到 HTML 5 的支持。 （1）流式音频和视频。目前 HTML 5 中没有视频比特率切换的标 准，所以 HTML 5 对视频的支持只限于加载的全部媒体文件。 （2）HTML 5 的媒体受到 HTTP 跨源资源共享的限制。 （3）HTML 5 自身无法在视频全屏播放时进行脚本控制。这个功 能的缺失是出于安全的考虑，但是可以通过浏览器自身的功能进行解 决。 1.4 浏览器对 HTML 5 的 Audio 和 Video 元素的支持 由于音频和视频的解码是有浏览器来进行的，因为除了了解浏览 器对 Audio 和 Video 元素的支持外，还需要知道浏览器支持的编解码
器 具体的支持情况可以通过网站查询:htp://htm15test.com。 browsers Chrome 26 cup to three browsers and compare 68 13 bonus points Video 30 30 Subtitle support m Yes v Poster image support p MPEG-4 support M Ogg Theora support R Yes v Yes/No x WebM support Yes PCM audio support M v Yes/ No x AAC support Yes v Ogg Vorbis support Ye5√ WebM support 图9-1 Chrome26、 Firefox20、E10对HTML5音频、视频的支持 、 video和 audio元素 2.1在HTML4页面中播放音频和视频的方法 在HTM4中,没有音频和视频的元素,只能够使用和 元素来进行。 案例 示例9-1:在HTML4页面中播放音频或视频 ttf>在HTML4页面中播放音频或视频文件<le 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xueweb cn
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 器。 具体的支持情况可以通过网站查询：http://html5test.com。 二、video 和 audio 元素 2.1 在 HTML 4 页面中播放音频和视频的方法 在 HTML 4 中，没有音频和视频的元素，只能够使用和 元素来进行。 案例： 示例 9-1：在 HTML 4 页面中播放音频或视频 在 HTML 4 页面中播放音频或视频文件 图 9-1 Chrome 26、Firefox 20、IE10 对 HTML 5 音频、视频的支持
播放视频 type="application/x-shockwave-flash data="FLVPlayer_Progressive. swf"width="673"height="378"> 播放音频 width=500" 通过这个案例,可以看到在HTML4页面中播放音频和视频的不 足是非常明显的。 (1)冗长的代码,且非常不简洁。 (2)需要使用第三方插件,如果用户的计算机没有安装相应的 插件,则视频就无法播放。 (3)需要结合使用和< embed》元素,并且需要添加大量 的属性和参数,代码的书写难度非常高。 2.2在HTML5页面中播放音频和视频的方法 在HTML5中,新增加了 video和 audio两个元素。 video元素 专门用来播放网络上的视频, audio元素用来播放网络上的音频。使 用这两个元素后,就不需要其他插件了,只要浏览器能够支持HTML5 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 播放视频 播放音频 通过这个案例，可以看到在 HTML 4 页面中播放音频和视频的不 足是非常明显的。 （1）冗长的代码，且非常不简洁。 （2）需要使用第三方插件，如果用户的计算机没有安装相应的 插件，则视频就无法播放。 （3）需要结合使用和元素，并且需要添加大量 的属性和参数，代码的书写难度非常高。 2.2 在 HTML 5 页面中播放音频和视频的方法 在 HTML 5 中，新增加了 video 和 audio 两个元素。video 元素 专门用来播放网络上的视频，audio 元素用来播放网络上的音频。使 用这两个元素后，就不需要其他插件了，只要浏览器能够支持 HTML 5
的这两个元素并且能够支持音频、视频文件的编解码器即可。同时, 代码的书写方法也非常简单、清晰、简洁。 案例: 示例9-2:在HTML5页面中播放音频或视频 播放视频 您的浏览器不支持vdeo元素 播放音频 您的浏览器不支持audo元素 body> 由于目前浏览器能够支持的编解码器不一致,为了确保一个视频 能够同时被所有支持HTML5的浏览器支持,则可以通过元 素来为同一个视频指定多个源,供不同的浏览器来选择适合自己的。 案例 示例9-3:使用多个源,在HIML5页面中播放音频或视频 使用多个源,在HTML5页面中播放音频或视频文件 播放视频 6《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
6 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 的这两个元素并且能够支持音频、视频文件的编解码器即可。同时， 代码的书写方法也非常简单、清晰、简洁。 案例： 示例 9-2：在 HTML 5 页面中播放音频或视频 在 HTML 4 页面中播放音频或视频文件 播放视频 您的浏览器不支持 video 元素。 播放音频 您的浏览器不支持 audio 元素。 由于目前浏览器能够支持的编解码器不一致，为了确保一个视频 能够同时被所有支持 HTML 5 的浏览器支持，则可以通过元 素来为同一个视频指定多个源，供不同的浏览器来选择适合自己的。 案例： 示例 9-3：使用多个源，在 HTML 5 页面中播放音频或视频 使用多个源，在 HTML 5 页面中播放音频或视频文件 播放视频
您的浏览器不支持vdeo元素 /video> 播放音频 您的浏览器不支持audo元素。 三、 video和 audio的属性 video元素和 audio元素的属性大致相同。 3.lsrc 元素介绍: src属性用来指定媒体数据的URL地址 3. preload 元素介绍: 该属性中指定视频或者音频是否进行预加载。如果使用预加载 浏览器将会预先将视频或者音频进行缓冲,这样可以加快播放的速度。 因为在进行数据播放时,可能数据已经缓冲一部分或者缓冲完成。 preload属性值有三种: (1)none:表示不进行预先加载。 (2) metadata:表示只预先加载媒体的元数据,主要包括媒体 字节数、第一帧、播放列表、持续时间等信息 (3)auto:表示预加载全部视频或音频。该值是默认值, 7《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xueweb cn
7 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 您的浏览器不支持 video 元素。 播放音频 您的浏览器不支持 audio 元素。 三、video 和 audio 的属性 video 元素和 audio 元素的属性大致相同。 3.1src 元素介绍： src 属性用来指定媒体数据的 URL 地址。 3.2preload 元素介绍： 该属性中指定视频或者音频是否进行预加载。如果使用预加载， 浏览器将会预先将视频或者音频进行缓冲，这样可以加快播放的速度。 因为在进行数据播放时，可能数据已经缓冲一部分或者缓冲完成。 preload 属性值有三种： （1）none：表示不进行预先加载。 （2）metadata：表示只预先加载媒体的元数据，主要包括媒体 字节数、第一帧、播放列表、持续时间等信息。 （3）auto：表示预加载全部视频或音频。该值是默认值
3. poster 元素介绍: 该属性为 vedio元素的独有属性,用来在视频不可用时,向用户 展示一张替代图片,从而避免视频不可用时,页面出现一片空白 3. loop 元素介绍: 该属性中指定是否循环播放视频或音频。 3. controls 元素介绍: 该属性中指定是否为视频或音频添加浏览器自带的播放用的控 制条。控制条中具有播放、暂停等按钮。不同的浏览器,自带的控制 条的样式不同。 可以通过撰写脚本的方式自定义控制条,而不使用浏览器默认的 控制条。 3.6 width和 height 元素介绍: 该属性为 vedio元素的独有属性。用来指定视频的宽度和高度。 3. error 元素介绍: 在读取、使用媒体数据的过程中,在正常情况下, video和 audio 元素的 error属性为nul1。当出现错误时, error属性将返回一个 Mediaerror对象,该对象通过code的方式将错误状态提供出来。错 误状态值为只读属性,且有4个可能值 (1)1: MEDIA ERR ABORTED,数据在下载中因为用户操作的原 因而被中止。 8《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
8 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 3.3poster 元素介绍： 该属性为 vedio 元素的独有属性，用来在视频不可用时，向用户 展示一张替代图片，从而避免视频不可用时，页面出现一片空白。 3.4loop 元素介绍： 该属性中指定是否循环播放视频或音频。 3.5controls 元素介绍： 该属性中指定是否为视频或音频添加浏览器自带的播放用的控 制条。控制条中具有播放、暂停等按钮。不同的浏览器，自带的控制 条的样式不同。 可以通过撰写脚本的方式自定义控制条，而不使用浏览器默认的 控制条。 3.6width 和 height 元素介绍： 该属性为 vedio 元素的独有属性。用来指定视频的宽度和高度。 3.7error 元素介绍： 在读取、使用媒体数据的过程中，在正常情况下，video 和 audio 元素的 error 属性为 null。当出现错误时，error 属性将返回一个 MediaError 对象，该对象通过 code 的方式将错误状态提供出来。错 误状态值为只读属性，且有 4 个可能值： （1）1：MEDIA_ERR_ABORTED，数据在下载中因为用户操作的原 因而被中止
(2)2: MEDIA_ ERR NETWORK,确认媒体资源可用,但是在下载 时出现网络错误,媒体数据的下载过程被中止, (3)3: MEDIA ERE& DECODE,确认媒体资源可用,但是解码时发 生错误 (4)4: MEDIA_ ERR SRC NOT SUPPORTER,媒体格式不被支持。 案例 示例9-4:读取错误状态 loctype html> 读取错误状态 id="Show Video" src="medias/oWeiZiJiDaiYan-AD mp4 videoerror document getElementByld('ShowVideo") videoerror addEventListener("error function var errorinfo videoerror ,error switch(errorinfo code) aler("用户取消了视频的载入。"); aler("网络故障,造成数据载入失败。"); aler("解码错误,请重新访问。"; aler("浏览器不支持获得的视频格式。"); 9《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
9 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn （2）2：MEDIA_ERR_NETWORK，确认媒体资源可用，但是在下载 时出现网络错误，媒体数据的下载过程被中止。 （3）3：MEDIA_ERR_DECODE，确认媒体资源可用，但是解码时发 生错误。 （4）4：MEDIA_ERR_SRC_NOT_SUPPORTER，媒体格式不被支持。 案例： 示例 9-4：读取错误状态 读取错误状态 var videoerror = document.getElementById("ShowVideo"); videoerror.addEventListener("error",function() { var errorinfo = videoerror.error; switch(errorinfo.code) { case 1: alert("用户取消了视频的载入。"); break; case 2: alert("网络故障，造成数据载入失败。"); break; case 3: alert("解码错误，请重新访问。"); break; case 4: alert("浏览器不支持获得的视频格式。"); break; } },false);
3. 8networkState 元素介绍: 媒体数据在加载过程中可以使用 video元素或 audio元素的 network State属性读取当前网络状态,其可能值有4个,该属性值 为只读属性。 (1)0: NETWORK EMPTY:初始状态 2)1: NETWORK_IDLE:浏览器已经选择好用什么编码格式来播 放媒体,但尚未建立网络连接。 (3)2: NETWORK LOADING:媒体数据加载中。 (4)3: NETWORK NO SOURCE:没有支持的编码格式,不进行加 3. 9currentSrc 元素介绍: currents属性用来读取 video元素和 audio元素中正在播放 中的媒体数据的URL地址 3. buffered 元素介绍: buffered属性用来返回一个对象,该对象实现 Timerange接口 以确认浏览器是否已缓存媒体数据。 buffered属性值为只读属性。 3. already state 元素介绍: 该属性返回 video或 audio元素中媒体当前播放位置的就绪状态, readyState属性值为只读属性,其有5个可能值。 (1)0: HAVE NOTHING:没有获得任何媒体的信息,当前播放位 置没有播放数据。 (2)1: HAVE METADATA:已经获得到足够的媒体信息,但是当 10《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
10 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 3.8networkState 元素介绍： 媒体数据在加载过程中可以使用 video 元素或 audio 元素的 networkState 属性读取当前网络状态，其可能值有 4 个，该属性值 为只读属性。 （1）0：NETWORK_EMPTY：初始状态。 （2）1：NETWORK_IDLE：浏览器已经选择好用什么编码格式来播 放媒体，但尚未建立网络连接。 （3）2：NETWORK_LOADING：媒体数据加载中。 （4）3：NETWORK_NO_SOURCE：没有支持的编码格式，不进行加 载。 3.9currentSrc 元素介绍： currentSrc 属性用来读取 video 元素和 audio 元素中正在播放 中的媒体数据的 URL 地址。 3.10buffered 元素介绍： buffered 属性用来返回一个对象，该对象实现 TimeRange 接口， 以确认浏览器是否已缓存媒体数据。 buffered 属性值为只读属性。 3.11readyState 元素介绍： 该属性返回video或audio元素中媒体当前播放位置的就绪状态， readyState 属性值为只读属性，其有 5 个可能值。 （1）0：HAVE_NOTHING：没有获得任何媒体的信息，当前播放位 置没有播放数据。 （2）1：HAVE_METADATA：已经获得到足够的媒体信息，但是当