第4讲 HTML5的多媒体.ppt

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