《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 定义了一个在网页中嵌入视频和音频的标准方式，就是
使用< video>和< audio>元素。虽然目前此部分的工作还不够完善,但 是已经取得了浏览器的广泛支持和认可。 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 使用<video>和<audio>元素。虽然目前此部分的工作还不够完善，但 是已经取得了浏览器的广泛支持和认可。 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中,没有音频和视频的元素,只能够使用< ob ject>和 < embed>元素来进行。 案例 示例9-1:在HTML4页面中播放音频或视频 <!DOCTYPE HTML PUBLIC -/3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/tr/hTml4/loose.dtd"> <head metahttp-equiv="content-type"content="Text/html;charset=utf-8"> ttf>在HTML4页面中播放音频或视频文件<le 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xueweb cn
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 器。 具体的支持情况可以通过网站查询：http://html5test.com。 二、video 和 audio 元素 2.1 在 HTML 4 页面中播放音频和视频的方法 在 HTML 4 中，没有音频和视频的元素，只能够使用<object>和 <embed>元素来进行。 案例： 示例 9-1：在 HTML 4 页面中播放音频或视频 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>在 HTML 4 页面中播放音频或视频文件</title> </head> 图 9-1 Chrome 26、Firefox 20、IE10 对 HTML 5 音频、视频的支持
<h1>播放视频</h1> type="application/x-shockwave-flash data="FLVPlayer_Progressive. swf"width="673"height="378"> <param name="quality"value=high"> <param name="wmode"value="opaque"> <param name="scale value ="noscale"> <param name=salian"value="it"> <param name= FlashVars value="& MM_ComponentVersion=1& skinName=Corona_Skin & streamName=medias/QQ-AD-1& autoPlay=false & autoRe wind=false <param name="swfversion"value=8,0,0,0"> <h1>播放音频</h1> width=500" </embed> 通过这个案例,可以看到在HTML4页面中播放音频和视频的不 足是非常明显的。 (1)冗长的代码,且非常不简洁。 (2)需要使用第三方插件,如果用户的计算机没有安装相应的 插件,则视频就无法播放。 (3)需要结合使用< object>和< embed》元素,并且需要添加大量 的属性和参数,代码的书写难度非常高。 2.2在HTML5页面中播放音频和视频的方法 在HTML5中,新增加了 video和 audio两个元素。 video元素 专门用来播放网络上的视频, audio元素用来播放网络上的音频。使 用这两个元素后,就不需要其他插件了,只要浏览器能够支持HTML5 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn <body> <center> <h1>播放视频</h1> <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="673" height="378"> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt"> <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_ 3&streamName=medias/QQ-AD-1&autoPlay=false&autoRe wind=false" /> <param name="swfversion" value="8,0,0,0"> </object> <h1>播放音频</h1> <embed src="medias/GeGe-ChangShilei.mp3" width="500" height="82"> </embed> <br><br> </center> </body> </html> 通过这个案例，可以看到在 HTML 4 页面中播放音频和视频的不 足是非常明显的。 （1）冗长的代码，且非常不简洁。 （2）需要使用第三方插件，如果用户的计算机没有安装相应的 插件，则视频就无法播放。 （3）需要结合使用<object>和<embed>元素，并且需要添加大量 的属性和参数，代码的书写难度非常高。 2.2 在 HTML 5 页面中播放音频和视频的方法 在 HTML 5 中，新增加了 video 和 audio 两个元素。video 元素 专门用来播放网络上的视频，audio 元素用来播放网络上的音频。使 用这两个元素后，就不需要其他插件了，只要浏览器能够支持 HTML 5