第04章__HTML5的多媒体

1、第4章 HTML5的多媒体 4.1 多媒体元素属性 4.3 多媒体元素事件 4.2 多媒体元素方法 4.1 多媒体元素属性HTML5新增了两个多媒体元素video和audio，分别用于在网页中添加视频和音频信息。多媒体元素的属性包括 （1）autoplay属性该属性用于设置指定的媒体文件，在页面加载完毕后是否自动播放。当多媒体元素的autoplay属性设置为“true”，其所在页面加载完毕后，将会自动执行播放操作。 （2）controls属性该属性用于在页面播放器面板上，显示一个元素自带的控制按钮工具栏。工具栏中提供了播放/暂停按钮，播放进度条，静音开关。对于不同的浏览器，该工具栏样式可能会有

2、所区别。多媒体元素属性字符常量返回值说明MEDIA_ERR_ABORTED1读取或加载媒体文件过程中出现错误或异常而放弃操作。MEDIA_ERR_NETWORK2网络错误，通常用于读取或加载指定网络地址的媒体文件。MEDIA_ERR_DECODE3指定的媒体资源不可用，通常由于缺少对应的解码器。MEDIA_ERR_SRC_NOT_SUPPORTED4没有可以播放的媒体格式。（3）error属性当多媒体元素加载或读取媒体文件过程中出现错误或异常时，可通过该属性返回一个错误对象MediaError，用于获取错误类型。错误对象MediaError提供的返回值及说明如下表所示（4）poster属性该属

3、性用于指定一个图片路径，该图片将占据video元素对应视频控件在网页中的位置，并在播放video元素指定媒体文件之前显示，或者在播放过程中出错显示。（5）networkState属性该属性用于返回加载媒体文件的网络状态。在浏览器加媒体文件时，通过调用onProgress事件获取当前网络状态值。返回值如下表所示多媒体元素属性字符常量返回值说明NETWORK_EMPTY0媒体文件加载初始化阶段。NETWORK_IDLE1媒体文件加载成功，等待播放请求阶段。NETWORK_LOADING2媒体文件正在加载阶段。NETWORK_NO_SOURCE3媒体文件加载错误，可能由于不支持的媒体编码格式。多媒体

4、元素属性 （6）width和height属性这两个属性主要用于设置video元素在页面中显示的大小，单位为像素。如果未指定宽度和高度属性，该元素对应控件在浏览器中将默认以媒体元素大小进行显示。 （7）readyState属性该属性用于返回播放器当前媒体文件的播放状态。当媒体文件开始播放时，通过调用onPlay事件获取当前媒体播放状态值。多媒体元素属性playbackRate:设置播放速度，默认值为1。Volume：设置播放音量，取值范围为01Muted：用于控制播放器是否静音，取值为true时，为静音，为false时，取消静音。Played：获取媒体文件已播放的时长信息，通过调用played属

5、性的Timerangeds对象，可以得到文件播放的开始时间和结束时间Paused：获取播放器的播放状态，true为暂停，false为正在播放。Ended：判断当前文件是否播放完毕。多媒体播放的方法 Load方法：用于重新加载待播放的媒体文件。 play方法，用于播放媒体文件。调用play方法时，会自动将元素paused的属性设置为false。 pause方法，用于暂停播放媒体文件。调用pause方法时，会自动将元素的paused属性设置为true。4.3 多媒体元素事件HTML5多媒体元素在读取或播放媒体文件的过程中，会触发一系列的事件，使用JavaScript可以捕捉事件并进行处理。1. 事

6、件捕捉方法（1）监听方式。使用addEventListener方法可以对当前设定多媒体元素的事件进行监听。该方法的参数说明如下： type为捕捉事件的名称 listener为绑定的函数 useCapture为事件的响应顺序。（2）获取事件句柄。通过在多媒体元素中使用onPlay，onPause等句柄获取事件，同时在指定的JavaScript方法中编写处理代码。HTML5提供了请求加载，开始加载，开始播放，暂停播放等一系列的多媒体播放事件，详见下表2. 支持的事件类型事件名称说明loadstart开始加载多媒体文件progress正在获取多媒体文件suspend暂停获取多媒体文件，下载过程没有正

7、常结束abort中止获取多媒体文件，没有完全获取多媒体数据，不是由于错误导致中止error获取多媒体文件过程中出现错误emptied网络状态变为未初始化状态，由于多媒体载入过程中出现致命错误，或load方法被调用stalled浏览器尝试获取媒体信息失败play准备完毕即将播放pause暂停播放loadedmetadata浏览器获取多媒体文件播放时长及字节数完毕loadeddata浏览器获取多媒体文件完毕waiting由于还未能获取下一帧多媒体信息而暂停播放，等待获取下一帧信息playing正在播放多媒体文件canplay满足播放多媒体文件条件，但获取多媒体数据速度小于播放速度将导致播放多媒体文件期间出现缓冲canplaythrough满足播放多媒体文件条件，且获取多媒体数据速度与播放速度相当，播放多媒体文件期间不会出现缓冲seeking正在请求多媒体数据信息seeked停止请求多媒体数据信息timeupdate当前播放时