共享博客HTML5多媒体audio和video详细介绍（二）
前面我们学习了audio和video最基本的用法，为了更加灵活的控制音视频的播放，我们就需要学习HTML5为我们提供的相关属性、方法和事件了。
audio和video相关属性
| 属性 | 描述 |
|---|---|
| src | 用于指定媒体资源的URL地址 |
| autoplay | 资源加载后自动播放 |
| buffered | 用于返回一个TimeRanges对象，确认浏览器已经缓存媒体文件。 |
| controls | 提供用于播放的控制条 |
| currentSrc | 返回媒体数据的URL地址 |
| currentTime | 获取或设置当前的播放位置，单位为秒 |
| defaultPlaybackRate | 返回默认播放速度 |
| duration | 获取当前媒体的持续时间 |
| loop | 设置或返回是否循环播放 |
| muted | 设置或返回是否静音 |
| networkState | 返回音频视频当前网络状态 |
| paused | 检查视频是否已暂停 |
| playbackRate | 设置或返回音频视频的当前播放速度 |
| played | 返回TimeRanges对象。TimeRanges表示用户已经播放的音频视频范围 |
| preload | 设置或返回是否自动加载音视频资源 |
| readyState | 返回音频视频当前就绪状态 |
| seekable | 返回TimeRanges对象，表明可以对当前媒体资源进行请求 |
| seeking | 返回是否正在请求数据 |
| valume | 设置或返回音量，值为0到1.0 |
audio和video相关方法
| 方法 | 描述 |
|---|---|
| canPlayType() | 检测浏览器是否能播放指定的音频、视频 |
| load() | 重新加载音频、视频元素 |
| pause() | 停止当前播放的音频、视频 |
| play() | 开始播放当前音频、视频 |
audio和video相关事件
| 事件 | 描述 |
|---|---|
| canplay | 当浏览器能够开始播放指定的音视频时，发生此事件 |
| canplaythrough | 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频视频时，发生此事件 |
| durationchange | 当音频、视频的时长数据发生变化时，发生此事件 |
| loadeddata | 当当前帧数据已加载，但没有足够的数据来播放指定音频视频的下一帧时，会发生此事件 |
| loadedmatadata | 当指定的音频视频的元数据已加载时，会发生此事件。元数据包括时长、尺寸（仅视频）以及文本轨道 |
| loadstart | 当浏览器开始寻找指定的音频视频时，发生此事件 |
| progress | 正在下载指定的音频视频时，发生此事件 |
| abort | 音频视频终止加载时，发生此事件 |
| ended | 音频视频播放完成后，发生此事件 |
| error | 音频、视频加载错误时，发生此事件 |
| pause | 音频视频暂停时，发生此事件 |
| play | 开始播放时，发生此事件 |
| playing | 因缓冲而暂停或停止后已就绪时触发此事件 |
| ratechange | 音频视频播放速度发生改变时，发生此事件 |
| seeked | 用户已移动、跳跃到音频视频中的新位置时，发生此事件 |
| seeking | 用户开始移动、跳跃到新的音频视频播放位置时，发生此事件 |
| stalled | 浏览器尝试获取媒体数据，但数据不可用时触发此事件 |
| suspend | 浏览器刻意不加载媒体数据时触发此事件 |
| timeupdate | 播放位置发生改变时触发此事件 |
| volumechange | 音量发生改变时触发此事件 |
| waiting | 视频由于需要缓冲而停止时触发此事件 |
【
文章推荐
-
HTML在线编辑器的调用方法和使用方法
html在线编辑器不需要懂得使用dreamweaver，会用word就会使用此编辑器，在文章系统或者是新闻系统需要文字编...
H5教程
2个月前 (10-19) 81 -
AlloyTouch全屏滚动插件 30秒搞定顺滑H5页
使用姿势在设计全屏滚动插件的时候，希望开发者几乎：不用写任何脚本快速生成精致H5支持PC滚轮和移动触摸酷炫的转场动效灵活...
H5教程
2个月前 (10-19) 82 -
HTML5 js实现拖拉上传文件功能
在html5的pc上面实现了相当多的功能，工作中也用到了拖拉上传，特地记录下该功能 在拖动目标上触发事件 (源元素): ...
H5教程
2个月前 (10-19) 82 -
Canvas and Drawables 翻译第一集
android官方原文地址：http://developer.android.com/guide/topics/grap...
H5教程
2个月前 (10-19) 86 -
Canvas and Drawables 翻译第三集
Android官方原文地址：http://developer.android.com/guide/topics/grap...
H5教程
2个月前 (10-19) 85