HTML5的多媒体.ppt

第4章HTML5的多媒体 4 1多媒体元素属性 4 3多媒体元素事件 4 2多媒体元素方法 4 1多媒体元素属性 HTML5新增了两个多媒体元素video和audio 分别用于在网页中添加视频和音频信息 多媒体元素的属性包括 1 autoplay属性该属性用于设置指定的媒体文件 在页面加载完毕后是否自动播放 当多媒体元素的autoplay属性设置为 true 其所在页面加载完毕后 将会自动执行播放操作 2 controls属性该属性用于在页面播放器面板上 显示一个元素自带的控制按钮工具栏 工具栏中提供了播放 暂停按钮 播放进度条 静音开关 对于不同的浏览器 该工具栏样式可能会有所区别 3 error属性当多媒体元素加载或读取媒体文件过程中出现错误或异常时 可通过该属性返回一个错误对象MediaError 用于获取错误类型 错误对象MediaError提供的返回值及说明如下表所示 4 poster属性该属性用于指定一个图片路径 该图片将占据video元素对应视频控件在网页中的位置 并在播放video元素指定媒体文件之前显示 或者在播放过程中出错显示 5 networkState属性该属性用于返回加载媒体文件的网络状态 在浏览器加媒体文件时 通过调用onProgress事件获取当前网络状态值 返回值如下表所示 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 目前各主流浏览器对各种视频制式支持性如下表所示 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多媒体元素在读取或播放媒体文件的过程中 会触发一系列的事件 使用JavaScript可以捕捉事件并进行处理 1 事件捕捉方法 1 监听方式 使用addEventListener方法可以对当前设定多媒体元素的事件进行监听 该方法的参数说明如下 type为捕捉事件的名称listener为绑定的函数useCapture为事件的响应顺序 2 获取事件句柄 通过在多媒体元素中使用onPlay onPause等句柄获取事件 同时在指定的JavaScript方法中编写处理