《HTML5与CSS3网页设计》-《HTML5与CSS3网页设计》-HTML5 与CSS5 网页设计（第二版）第十二章

第12章视频、音频和其他多媒体12.1第三方插件及原生应用12.2添加视频12.3添加音频12.4嵌入Flash动画12.5嵌入网络视频12.6canvas简介12.7SVG简介12.8综合实例返回12.1第三方插件及原生应用互联网变得如此流行的原因之一就是人们可以在网页中添加图像、声音、动画、视频等元素。有的多媒体网页可以作为音频或者视频的基础，有的是广告或交互显示。在HTML5出现之前，为网页添加多媒体的唯一办法就是使用第三方插件，如AdobeFlashPlayer、QuickTime等都是第三方插件。要在网络上展示视频、音频、动画，除了使用第三方自主开发的播放器之外，用得最多的工具应该算是Flash了，但是它们都需要在浏览器上面安装各种插件。这些第三方插件就像黑箱一样，只有当用户真正安装了它们时才能起作用。但是这样也会出现一些问题，如在某个浏览器中嵌入Flash视频，而在另一个浏览器可能就不会起作用了。并且在速度方面也存在问题，因为浏览器会将所有的多媒体内容的播下一页返回12.1第三方插件及原生应用放完全交给插件。HTML5的出现使得这一局面得到了改观，在HTML5中不需要安装插件了，只需要一个支持HTML5的浏览器就可以了。HTML5添加了原生的多媒体，希望用这个解决速度问题、浏览器对插件的依赖问题。开始，HTML5规范规定了两种兼容HTML5的浏览器必须支持的格式，分别处理音频和视频。但是这样处理，并不能得到所有厂商的支持和遵循，比如诺基亚和苹果都没有选择使用这些媒体格式，因此后来这些设置在规范中被删除了。上一页返回12.2添加视频12.2.1视频文件格式不论是音频文件还是视频文件，实际上都只是一个容器文件，这点类似于压缩文件(zip文件或rar文件)。为方便同时回放，人们设定了不同的视频文件格式来把视频和音频放在一个文件中，即在同一个容器格式文件里面包裹着不同的轨道。容器是用来区分不同文件的数据类型的，而编码格式则由音视频文件的压缩算法决定。一般所说的文件格式或者后缀名即是指文件的容器格式。对于一种容器格式文件，可以包含不同编码格式的视频和音频。目前比较知名的容器格式包括AVI(.avi)、MPEC(.mpg、.mpeg)、Quicklime.mov)、RealMedia(.rm)、MP4(.mp4)等。(1)FlashVideo简称FLV)，是由AdobeFlash延伸出来的一种流行下一页返回12.2添加视频的网络视频封装格式。(2)AVI(AudioVideoInterleave):比较早的AVI是微软开发的。(3)WMV(WindowsMediaVideo)同样是微软开发的一组数字视频编解码格式的通称，ASF(AdvancedSystemsFormat)是其封装格式。(4)MPEC格式:MPEC(MovingPictureExpertsCroup)是一个国际标准化组织(ISO)认可的媒体封装形式，受到大部分机器的支持。(5)Matroska是一种新的多媒体封装格式，这个封装格式可把多种不同编码的视频及16条或以上不同格式的音频和语言不同的字幕封装到一个MatroskaMedia档内。(6)RealVideo也称RealMedia(RM)，是由RealNetworks开发的上一页下一页返回12.2添加视频一种档容器。(7)QuicklimeFileFormat是由苹果公司开发的容器。(8)oggMedia是一个完全开放的多媒体系统计划，OCM(oggMediaFile)是其容器格式。(9)MOD是JVC生产的硬盘摄录机所采用的存储格式的名称。音频和视频的编解码器是一组算法，用来对一段特定音频或视频进行解码和编码，以使音频和视频都能够播放。视频编解码器是一个能够对数字视频进行压缩或者解压缩的程序或者设备，通常这种压缩属于有损数据压缩。HTML5支持三种主要的视频编解码器，表12-1中是这三种编码器及支持它们的浏览器。上一页下一页返回12.2添加视频在HTML5网页中添加视频需要使用video元素。在网页中添加单个视频的步骤如下:(1)获取视频资源。(2)输入<videosrc=”视频地址”></video>。src属性直接指向媒体文件，而浏览器不支持相关容器或者编码器时就需要用到备用声明。备用声明中可以包含多种来源，浏览器可以在这些来源中进行选择。video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。source元素具有几个属性:src属性用来播放媒体的URL地址;type属性表示媒体类型，其属性值为播放文件的MIME类型，该属性中的codecs参数表示所使用的媒体的编码格式。type属性是可选属性，上一页下一页返回12.2添加视频但是如果我们明确知道浏览器支持某种类型最好不要省略，否则浏览器在处理的时候会在从上往下选择时无法判断自己能不能播放而先行下载一小段视频数据，这样就有可能浪费带宽和时间了。因为各浏览器对各种媒体的类型及其编码格式的支持情况各不相同，所以使用source元素来制定多种媒体类型是非常有必要的。在上面的例子中，我们使用两个source元素替代src属性，这样能让浏览器根据自身的播放能力自动选择，挑选最佳的来源进行播放。对于来源，浏览器会根据声明顺序判断，如果它支持的不止一种，那么浏览器会选择其支持的第一个来源。12.2.3视频属性下面来看看哪些属性是可以用在video元素上的，表12-2中是常用的上一页下一页返回12.2添加视频video属性。1.src在该属性中可指定媒体数据的URL地址。2.autoplay在该属性中可设定媒体是否在页面加载后自动播放。该属性的语法如下<videoautoplay="autoplay"/>3.preload在该属性中可指定视频是否预加载。如果使用预加载的话，浏览器会预先将视频进行缓冲这样可以加快播放的速度，因为播放时数据已经预先缓冲完毕。该属性有三个可选的值:none、metadata、auto,默认值是auto。上一页下一页返回12.2添加视频该属性的语法如下<videopreload="auto”/>4.poster其也称海报形式，指定视频加载时要显示的图像，而不是显示视频的第一帧，接受所需图像文件的src。该属性的语法如下:<videosrc="sample.mov"poster="Can.jpg"/>5.loop在该属性中可指定是否循环播放视频。该属性的语法如下<videoloop="loop"/>6.controls在该属性中可指定是否为视频添加浏览器自带的播放用的控制条。控上一页下一页返回12.2添加视频制条中具有播放、暂停等按钮。该属性的语法如下<videocontrols="controls”/>7.width与height在该属性中可指定视频的宽度与高度(以像素为单位)。这两个属性的语法如下<videoNeight="value”width="value"/>8.error在读取、使用媒体数据的过程中，在正常情况下，video的属性为null，但是在任何时候只要出现错误，error属性就会返回一个MediaError对象，该对象的code返回对应的错误状态。9.networkState上一页下一页返回12.2添加视频在媒体数据加载的过程中可以使用video元素的networkState属性读取当前的网络状态。10.currentSrc可以使用video的currentSrc属性来读取播放中的媒体数据的URL地址。11.buffered可以使用video的buffered属性来返回一个对象，该对象实现TimeRanges接口，以确认浏览器是否已缓存媒体数据。TimeRanges对象表示用户的视频缓冲范围。缓冲范围指的是已缓冲视频的时间范围。如果用户在视频中跳跃播放，会得到多个缓冲范围。12.readyState上一页下一页返回12.2添加视频可以使用video的readyState属性返回视频的当前就绪状态。就绪状态表示视频是否已准备好播放。13.seeking与seekable可以使用、ideo的seeking属性返回一个布尔值，表示浏览器是否正在请求某一特定播放位置的数据，true表示正在请求，false表示已停止请求。可以使用video的seekable属性来返回一个TimeRanges对象，该对象表示请求到的数据的时间范畴。TimeRanges对象表示视频中用户可寻址的范围。14.currentTime、startTime与duration可以使用video的currentTime属性设置或返回视频播放的当前位置上一页下一页返回12.2添加视频(以秒计)。当设置该属性时，播放会跳跃到指定的位置。可以使用video的startTime属性来读取媒体播放的开始时间，通常为0。可以使用video的，duration属性返回当前视频的长度(以秒计)，如果未设置视频，则返回NaN(Not-a-Number)。15.played、paused与ended可以使用video的played属性来返回一个TimeRanges对象，从该对象中可以读取媒体文件的已播放部分的时间段。paused属性返回视频是否已暂停的信息。ended属性返回视频是否已结束的信息，如果播放位置位于视频的结尾，则视频已结束。16.defaultPlaybackRate与playbackRate上一页下一页返回12.2添加视频可以使用video的，defaultPlaybackRate属性设置或返回视频的默认播放速度。设置该属性仅改变默认的播放速度，而不是当前的。要改变当前的播放速度，应使用playbackRate属性。playbackRate属性可设置或返回视频的当前播放速度。17.volume与muted可以使用video的volume属性设置或返回视频的当前音量。muted属性可设置或返回视频是否应该被静音(关闭声音)的信息。12.2.4添加控件和自动播放前面我们介绍了在网页中添加视频的最简单的方法，在12.2.2节中给出了一个示例，在该示例中我们创建了一个带有播放按钮的播放器，但是该视频不能自动播放。下例给出了一个没有控件的视频页面，在上一页下一页返回12.2添加视频该页面中，视频中没有控件去控制播放的效果。在上面这个例子中，如果想更好地使用视频，则需要在video中添加controls属性，controls属性告诉浏览器为视频添加一系列默认的控件。在Firefox中其显示效果如图12-2所示。controls属性规定浏览器应该为视频提供播放控件。如果设置了该属性，则规定不存在作者设置的脚本控件。浏览器控件应该包括:(1)播放;(2)暂停;(3)定位;(4)音量;上一页下一页返回12.2添加视频(5)全屏切换;(6)字幕(如果可用);(7)音轨(如果可用)。从上例中可以看到，在video元素中指定controls属性即可在页面中以默认的方式进行播放控制。如果不加这个属性，那么在播放的时候就不会显示控制界面，而即使不添加controls属性也不会影响正常显示。有一种方法可以让没有controls属性的视频正常播放，那就是在video元素中设置另一个属性autoplay。通过设置autoplay属性，不需要任何用户交互，视频文件就会在加载完成后自动播放，不过大部分用户对这种方式比较反感。上一页下一页返回12.2添加视频12.2.5循环播放和海报图像对视频不仅可以设置自动播放，还可以将它设置为循环播放，当然这种做法和前面自动播放一样需要慎用。要实现循环播放，只需要在video元素中添加autoplay和loop属性即可。通常浏览器会在视频加载时显示视频的第一帧，如果想对此作出修改，指定自己的图像，就需要通过海报图像来实现。要为视频指定海报图像，应首先获取视频资源，然后在video中添加poster属性。该视频在没有播放时候的页面如图12-3所示。12.2.6阻止预加载视频想要实现阻止网页预加载视频，只需要在video元素中使用preload属性。上一页下一页返回12.2添加视频12.2.7多个媒体源source元素用来定义一个以上的媒体元素的来源，一个video元素中可以包含任意数量的source元素。同时，当浏览器不支持相关容器或者编解码器时，就可以用备用声明了。备用声明可以包含多种来源，浏览器可以在这些来源中进行选择。当浏览器发现video元素时，首选检查该元素是否定义src，如果没有，就会检查source元素。12.2.8应对无法播放HTML5视频的方法在12.2.7节的例子中提供了对不支持HTML5浏览器的用户所显示的一条文本信息，可以将这条信息替换成一个指向视频文件的超链接，从而让用户可以下载该文件并观看。上一页下一页返回12.2添加视频如图12-4所示就是在IE8浏览器中打开该文件时的截图。IE8浏览器会忽略video和source元素，仅仅显示下载链接。我们可以使用object元素，因为该元素提供的解决方案更完整—包含在object元素中的内容都会呈现出来，就算浏览器并不支持object元素指定的插件。这样就可以指定另外一个后备方案了，即后备方案中的后备方案。此外，还可以试用开源的Flash视频播放器(如JWPlayer)，它可以让嵌入视频的过程更容易。如果播放器能播放MP4文件，就可以对现有的视频源文件进行复用，如果不能播放MP4文件则需要将视频转化为SWF或FLV文件。在上例中，如果浏览器不支持video元素，就会启用备用的Flash视频，上一页下一页返回12.2添加视频该视频使用object元素插入备用的视频，而播放该视频的播放器选择的是JWPlayer播放器。在本例中该播放器被命名为player.swf，并且和例子中的网页存储在同一文件夹下。在object元素中除了定义数据类型和数据源地址以外，还定义了高度和宽度，如果使用默认值则有可能出现显示的误差。除了单独使用备用Flash的视频，还可以在Flash对象后面、video元素结束标记前面添加一个视频下载链接。这样就进一步提供了后备方案，让用户可以有多种选择，但是在不支持HTMLS的浏览器中，备用Flash视频和下载链接是会同时显示的。上一页下一页返回12.2添加视频上面讲到的备用Flash视频和备用超链接都是在浏览器不支持HTMLS视频的情况下使用，但是如果出现浏览器支持HTMLS视频，但是无法找到播放文件的情况，它将不会使用备用方案来处理。如图12-6所示是使用Firefox浏览器，但是早找不到可播放的视频文件时的状态，它不会使用备用Flash播放器，也不会显示下载链接。上一页返回12.3添加音频12.3.1音频文件格式如今的浏览器，相比于支持视频编解码器而言，能支持更多的音频编解码器。和视频一样，HTML5也支持不同的音频文件格式。HTML5支持三种主要的音频编解码器，表12-3列出了这三种编解码器及支持它们的浏览器。12.3.2在网页中添加单个音频在网页中添加音频和添加视频的过程相似，不过添加音频时用到的是audio元素。在网页中添加单个音频的步骤如下:(1)获取音频资源。(2)输入<audiosrc=”音频地址”></audio>下一页返回12.3添加音频src属性、type属性和autoplay属性的使用方法和video元素中一样。我们也可以指定用来编码音频文件的确切的解码器。这能帮助浏览器决定它是否能播放该内容。12.3.3音频属性下面来看看哪些属性是可以用在audio元素上的，表12-4列出的是常用的audio属性。12.3.4添加控件、自动播放和循环播放如图12-7所示是在支持audio元素的浏览器Firefox中页面的显示效果。从图中可以看到一个带有播放按钮的播放器控制条。单击播放按钮就可以播放音频文件。和视频控件一样，每个浏览器都有处理控件外观的独特方式，所以上一页下一页返回12.3添加音频图12-7中显示的是在Firefox浏览器中音频控件的独特方式。而在网页中同时使用controls和autoplay属性就可以为音频文件添加控件并使其在加载后自动播放。在网页中为音频文件添加控件并让其自动播放的步骤如下:(1)获取音频文件。(2)输入<audiosrc=”音频文件地址”autoplay="autoplay"controls="controls">除了自动播放外，我们还可以使用loop属性让音频文件循环播放，其步骤如下(1)获取音频文件。(2)输入<audiosrc=”音频文件地址”loop="loop"controls="上一页下一页返回12.3添加音频controls">和视频文件的自动播放与循环播放一样，音频文件的自动播放和循环播放一样会干扰用户播放其他音频，所以对于音频的自动播放和循环播放也应该慎用。12.3.5预加载音频通过audio元素的preload属性，可以以不同的方式对网页中的音频文件进行预加载。下面先看看如何让浏览器预加载音频文件。其步骤如下:(1)获取音频文件。(2)输入<audiosrc=”音频文件地址”preload="load"controls="controls"></audio>上一页下一页返回12.3添加音频12.3.6多个音频源和视频一样，我们也需要为音频文件提供至少两种不同的解码器才能覆盖所有支持HTML5的浏览器。一个audio元素能包含多种source元素，为音频提供多种格式支持。source元素可以链接不同的音频文件。当浏览器解析音频元素时，它将通过source元素列表循序地查找，直到找到一个它能播放的文件格式。一旦找到后，就播放该文件并忽略随后的其他元素。12.3.7应对无法播放HTML5音频的方法和视频一样，音频文件在使用的过程中也可能碰到不支持HTML5的浏览器，音频文件的后备方案和视频一样也有超链接和Flash这两种选择。上一页下一页返回12.3添加音频同样，音频的备用方案中也经常使用Flash来操作，同视频一样，也可以为这些浏览器提供备用的Flash播放器。和视频一样，也可以在同一个文件中既使用超链接的备用方案，又使用Flash的备用方案。上一页返回12.4嵌人Flash动画在网页中嵌入Flash动画需要使用object元素，在其属性type中指定MIME类型为Flash动画，并且利用属性data给出Flash文件的地址，最后根据需要指定高度和宽度以便设计相应的显示效果。除了object元素外，也需要使用param元素，该元素包含在object元素之内，为包含它的object提供参数。返回12.5嵌人网络视频所谓网络视频，是指由网络视频服务商提供的、以流媒体为播放格式的、可以在线直播或点播的声像文件。网络视频一般需要独立的播放器，文件格式主要是基于P2P技术而占用客户端资源较少的FLV流媒体格式。网络视频是视频网站提供的在线视频播放服务的内容，是主要利用流媒体格式的视频文件。嵌入网络视频的步骤如下(以优酷网为例)(1)访问优酷网站并找到需要的视频。(2)在优酷播放视频的页面点击打开播放器下方的“分享”，复制Flash地址。如图12-10所示。(3)按照嵌入Flash动画的步骤，嵌入Flash。在输入Flash动画的URL地址的位置，输入刚才复制的视频地址。返回12.6canvas简介canvas对象表示一个HTML画布元素canvas。它没有自己的行为，但是定义了一个API支持的脚本化客户端绘图操作。设计者可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRendering