第5章 HTML5媒体 本章主要介绍HTML5媒体的功能与应用,包括HTML5声频和视频,使用该技术可以在页面上直接播放当前浏览器所支持的声频或视频格式,无须再借助Flash或者第三方工具。 本章学习重点: 理解HTML5声频与视频的作用 熟练掌握和标签的用法 熟练使用标签实现文字滚动 11min 5.1声频 5.1.1HTML5对声频的支持情况 目前HTML5支持的常用声频格式有以下3种。 (1) OGG格式: 声频文件的扩展名为.ogg,OGG声频格式类似于MP3声频格式。 (2) MP3格式: 声频文件的扩展名为.mp3。 (3) WAV格式: 声频文件的扩展名为.wav。 主流浏览器对这3种声频格式的支持情况如表51所示。 表51主流浏览器对HTML5声频格式的支持情况 声 频 格 式IEFirefoxChromeSafariOpera OGG不支持3.5及以上版本支持3.0及以上版本支持不支持10.5及以上版本支持 MP39.0及以上版本支持不支持3.0及以上版本支持3.0及以上版本支持不支持 WAV不支持3.5及以上版本支持不支持3.0及以上版本支持10.5及以上版本支持 由此可见,目前没有一种声频格式得到所有浏览器的支持。 5.1.2声频的应用 HTML5提供了标签来显示声频的标准方法。 标签是来定义声频(音乐或其他声频流)的,有了这个标签就可以在个人网站中引入声频文件。 基本语法格式如下: 对不起,你的浏览器不支持声频API。 提示: 可以在和之间放置文本内容,这些文本信息将会被显示在那些不支持标签的浏览器中。 标签有一系列属性用于对声频文件的播放进行设置,如表52所示。 表52标签属性一览表 属性值描述 autoplayautoplay声频就绪后马上播放 controlscontrols向用户显示声频控件(例如播放/暂停按钮) looploop每当声频结束时重新开始播放 mutedmuted首次加载声频时输出为静音 preloadauto metadata none规定当网页加载时,声频是否默认被加载及如何被加载 srcURL规定声频文件的 URL,必需的属性 注意: preload属性和autoplay属性不能同时使用。当属性名与值完全相同时,可以简写,如autoplay="autoplay",可简写为autoplay。 由于不同浏览器所支持的声频格式不一样,所以可以在标签中使用 标签指定多个声频文件,为不同的浏览器提供可支持的编码格式,浏览器会选择可识别的声频格式进行加载。 基本语法格式如下: 对不起,你的浏览器不支持声频API。 使用标签来完成在网页中引入声频文件,如例51所示。 【例51】 声频标签的应用 声频标签的应用 童话镇--暗杠 你的浏览器不支持声频播放 在浏览器中的显示效果如图51所示。 图51声频标签的应用效果 6min 5.2视频 5.2.1HTML5对视频的支持情况 目前HTML5支持的常用视频格式有以下3种。 (1) OGG: 一种开源的视频封装容器,其视频文件的扩展名为.ogg,里面可以封装vobris声频编码或者theora视频编码。 (2) MPEG4: 目前最流行的视频格式,其视频文件的扩展名为.mp4。 (3) WebM: 由谷歌发布的一个开放、免费的媒体文件格式,其视频文件扩展名为.webm。 由于WebM格式的视频质量和MPEG4较为接近,并且没有专利限制等问题,所以WebM已经被越来越多的人所使用。 主流浏览器对这3种视频格式的支持情况如表53所示。 表53主流浏览器对HTML5视频格式的支持情况 视 频 格 式IEFirefoxChromeSafariOpera OGG不支持3.5及以上版本支持5.0及以上版本支持不支持10.5及以上版本支持 MPEG49.0及以上版本支持不支持5.0及以上版本支持3.0及以上版本支持不支持 WebM不支持4.0及以上版本支持6.0及以上版本支持不支持10.6及以上版本支持 由此可见,目前没有一种视频格式得到所有浏览器的支持。 5.2.2视频的应用 HTML5提供了标签来显示视频的标准方法。 标签定义视频,例如电影片段或其他视频流。 基本语法格式如下: 你的浏览器不支持视频API 提示: 可以在 和 标签之间放置文本内容,这样不支持 元素的浏览器就可以显示出该标签的信息。 标签提供了播放、暂停和音量控件来控制视频。同时元素也提供了width和height属性控制视频的尺寸。如果设置了高度和宽度,则所需的视频空间会在页面加载时保留。当然还提供了其他属性对视频播放进行设置,如表54所示。 表54标签属性一览表 属性值描述 autoplayautoplay视频就绪后马上播放 controlscontrols向用户显示控件,例如播放按钮 heightpixels设置视频播放器的高度 looploop当媒介文件完成播放后再次开始播放 mutedmuted规定视频的声频输出应该被静音 posterURL规定视频下载时显示的图像(视频封面),或者在用户单击“播放”按钮前显示的图像 preloadpreload视频在页面加载时进行加载,并预备播放。如果使用autoplay,则忽略该属性 srcurl要播放的视频的 URL widthpixels设置视频播放器的宽度,必需的属性 由于不同浏览器所支持的视频格式不一样,所以可以在标签中使用 标签指定多个视频文件,为不同的浏览器提供可支持的编码格式,浏览器会选择可识别的视频格式进行加载。 基本语法格式如下: 你的浏览器不支持视频API 使用标签来完成在网页中引入视频文件,如例52所示。 【例52】视频标签应用 视频标签应用 你的浏览器不支持视频API 在浏览器中的显示效果如图52所示。 图52视频标签应用效果 13min 5.3滚动文字 在HTML中实现文字的滚动效果其实很简单,可使用标签实现文字的滚动效果,下面介绍标签设置不同属性实现不同的文字滚动效果。 基本语法格式如下: 滚动内容 1. behavior属性 设置内容的滚动方向,其属性值可以是alternate(来回交替进行滚动)、scroll(循环滚动,默认效果)、slide(只滚动一次就停止),示例代码如下: 我来回滚动 我单方向循环滚动 我改单方向向上循环滚动 我只滚动一次 我改向上只滚动一次了 注意: 如果在标签中同时出现了direction和behavior属性,则scroll和slide的滚动方向将依照direction属性中参数的设置。 2. bgcolor属性 设置文字滚动范围的背景颜色,参数值是十六进制(如#AABBCC或#AA5566)或预定义的颜色名字(如red、yellow、blue),示例代码如下: 我的背景色是红色的 3. direction属性 文字滚动的方向,其属性值有down、left、right、up,分别代表滚动方向向下、向左、向右、向上,示例代码如下: 我向右滚动 我向下滚动 4. width和height属性 width和height属性的作用决定滚动文字在页面中的矩形范围大小。width属性用以规定矩形的宽度,height属性用以规定矩形的高度。这两个属性的参数值可以是数字或者百分数,数字表示矩形所占的(宽或高)像素数,百分数表示矩形所占浏览器窗口的(宽或高)百分比,示例代码如下: 宽300像素,高30像素。 5. hspace和vspace属性 这两个属性决定滚动矩形区域距周围的空白区域,示例代码如下: 矩形边缘水平和垂直距周围各10像素。 矩形边缘水平和垂直距周围各50像素。 6. loop属性 设置滚动文字的滚动次数。参数值可以是任意的正整数,如果将参数值设置为-1或infinite,则将无限循环,示例代码如下: 滚动2次。 无限循环滚动。 无限循环滚动。 7. scrollamount和scrolldelay属性 这两个属性决定文字滚动的速度(scrollamount)和延时(scrolldelay),参数值都是正整数,示例代码如下: 速度很快。 慢了些。 小步前进。 大步前进。 8. align属性 设置滚动内容的对齐方式,其属性值有9个: absbottom(绝对底部对齐)、absmiddle(绝对中央对齐)、baseline(底线对齐)、bottom(底部对齐)、left(左对齐)、middle(中间对齐)、right(右对齐)、texttop(顶线对齐)、top(顶部对齐)。 基本语法格式如下: ... 9. marquee常配合使用的两个事件 onMouseOut="this.start()"用来设置鼠标移出该区域时继续滚动。 onMouseOver="this.stop()"用来设置鼠标移入该区域时停止滚动。 示例代码如下: 鼠标进入停止 离开开始 第2阶段〓HTML5实战训练营