第4讲 HTML5地多媒体.pptVIP

第4章 HTML5的多媒体 4.1 多媒体元素属性 4.3 多媒体元素事件 4.2 多媒体元素方法 4.1 多媒体元素属性 HTML5新增了两个多媒体元素video和audio，分别用于在网页中添加视频和音频信息。多媒体元素的属性包括 （1）autoplay属性 该属性用于设置指定的媒体文件，在页面加载完毕后是否自动播放。当多媒体元素的autoplay属性设置为“true”，其所在页面加载完毕后，将会自动执行播放操作。 （2）controls属性 该属性用于在页面播放器面板上，显示一个元素自带的控制按钮工具栏。工具栏中提供了播放/暂停按钮，播放进度条，静音开关。对于不同的浏览器，该工具栏样式可能会有所区别。 （3）error属性 当多媒体元素加载或读取媒体文件过程中出现错误或异常时，可通过该属性返回一个错误对象MediaError，用于获取错误类型。 字符常量 返回值 说明 MEDIA_ERR_ABORTED 1 读取或加载媒体文件过程中出现错误或异常而放弃操作。 MEDIA_ERR_NETWORK 2 网络错误，通常用于读取或加载指定网络地址的媒体文件。 MEDIA_ERR_DECODE 3 指定的媒体资源不可用，通常由于缺少对应的解码器。 MEDIA_ERR_SRC_NOT_SUPPORTED 4 没有可以播放的媒体格式。 错误对象MediaError提供的返回值及说明如下表所示 （4）poster属性 该属性用于指定一个图片路径，该图片将占据video元素对应视频控件在网页中的位置，并在播放video元素指定媒体文件之前显示，或者在播放过程中出错显示。 （5）networkState属性 该属性用于返回加载媒体文件的网络状态。在浏览器加媒体文件时，通过调用onProgress事件获取当前网络状态值。返回值如下表所示 字符常量 返回值 说明 NETWORK_EMPTY 0 媒体文件加载初始化阶段。 NETWORK_IDLE 1 媒体文件加载成功，等待播放请求阶段。 NETWORK_LOADING 2 媒体文件正在加载阶段。 NETWORK_NO_SOURCE 3 媒体文件加载错误，可能由于不支持的媒体编码格式。 （6）width和height属性 这两个属性主要用于设置video元素在页面中显示的大小，单位为像素。如果未指定宽度和高度属性，该元素对应控件在浏览器中将默认以媒体元素大小进行显示。 （7）readyState属性 该属性用于返回播放器当前媒体文件的播放状态。当媒体文件开始播放时，通过调用onPlay事件获取当前媒体播放状态值。 4.2 多媒体元素方法 HTML5提供了一些多媒体元素方法，方便用户自定义控制播放。 1. HTML5支持的视频制式 （1）Theora （2）Ogg （3）VP8 （4）AAC （5）H.264 （6）WebM 目前各主流浏览器对各种视频制式支持性如下表所示 浏览器 版本 支持多媒体格式 IE6/IE7/IE8 所有版本 不支持 IE9/IE10 所有版本 支持Theora和Ogg Vorbis、VP8和Vorbis、WebM格式 Chrome 3.0及以上版本 支持Theora和Ogg Vorbis、H.264和MPEG 4 AAC Firefox 3.5及以上版本 支持Theora和Ogg Vorbis Opera 10.5及以上版本 支持Theora和Ogg Vorbis、VP8和Vorbis、WebM格式 Safari 3.2及以上版本 支持H.264和MPEG 4 AAC格式 2. HTML5对媒体支持性检测 canPlayType()方法的不同返回值，可确定当前浏览器对媒体的支持性。 （1）当返回值为空字符时，表示应用浏览器不支持当前待播放的媒体文件格式。 （2）当返回值为maybe时，表示不确定应用浏览器是否能够支持当前待播放的媒体文件格式。 （3）当返回值为probably时，表示应用浏览器支持当前待播放的媒体文件格式。 3. load，play及pause方法 （1）load方法，用于重新加载待播放的媒体文件。调用load方法时，会自动将多媒体元素的playbackRate属性设置为defaultPlaybackRate属性的值，同时将error属性值设置为null。 （2）play方法，用于播放媒体文件。调用play方法时，会自动将元素paused的属性设置为false。 （3）pause方法，用于暂停播放媒体文件。调用pause方法时，会自动将元素的paused属性设置为true。 4.3 多媒体元素事件 HTML5多媒体元素在读取或播放媒体文件的过程中，会触发一系列的事件，使