最近做ipad的视频兼容的时候用到了html5的video标签,在做一个功能的时候遇到了问题(视频播放的时候显/隐某个图层,利用play()和pause()事件来控制,视频播放一遍之后失效,最终用监听timeupdate的方法解决了,不过仍然不明不白的……)。
找资料的时候发现一个外国网站总结的非常全面http://www.w3.org/2010/05/video/mediaevents.html,简单翻译了后拿来和大家分享一下
这个页面主要演示了HTML5视频元素,和它的 媒体 API,还有 媒体事件. 播放,暂停,拖放,改变音量,静音,改变播放速度 (包括变为负值). 可以直观的看到视频的基本事件和属性.
说明
属性 | 描述 |
---|---|
audioTracks | 返回可用的音轨列表(MultipleTrackList对象) |
autoplay | 媒体加载后自动播放 |
buffered | 返回缓冲部件的时间范围(TimeRanges对象) |
controller | 返回当前的媒体控制器(MediaController对象) |
controls | 显示播控控件 |
crossOrigin | CORS设置 |
currentSrc | 返回当前媒体的URL |
currentTime | 当前播放的时间,单位秒 |
defaultMuted | 缺省是否静音 |
defaultPlaybackRate | 播控的缺省倍速 |
duration | 返回媒体的播放总时长,单位秒 |
ended | 返回当前播放是否结束标志 |
error | 返回当前播放的错误状态 |
initialTime | 返回初始播放的位置 |
loop | 是否循环播放 |
mediaGroup | 当前音视频所属媒体组 (用来链接多个音视频标签) |
muted | 是否静音 |
networkState | 返回当前网络状态 |
paused | 是否暂停 |
playbackRate | 播放的倍速 |
played | 当前播放部件已经播放的时间范围(TimeRanges对象) |
preload | 页面加载时是否同时加载音视频 |
readyState | 返回当前的准备状态 |
seekable | 返回当前可跳转部件的时间范围(TimeRanges对象) |
seeking | 返回用户是否做了跳转操作 |
src | 当前音视频源的URL |
startOffsetTime | 返回当前的时间偏移(Date对象) |
textTracks | 返回可用的文本轨迹(TextTrackList对象) |
videoTracks | 返回可用的视频轨迹(VideoTrackList对象) |
volume | 音量值 |
事件 | abort | 当音视频加载被异常终止时产生该事件 |
---|---|---|
canplay | 当浏览器可以开始播放该音视频时产生该事件 | |
canplaythrough | 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件 | |
durationchange | 当媒体的总时长改变时产生该事件 | |
emptied | 当前播放列表为空时产生该事件 | |
ended | 当前播放列表结束时产生该事件 | |
error | 当加载媒体发生错误时产生该事件 | |
loadeddata | 当加载媒体数据时产生该事件 | |
loadedMetadata | 当收到总时长,分辨率和字轨等Metadata时产生该事件 | |
loadstart | 当开始查找媒体数据时产生该事件 | |
pause | 当媒体暂停时产生该事件 | |
play | 当媒体播放时产生该事件 | |
playing | 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件 | |
progress | 当获取到媒体数据时产生该事件 | |
ratechange | 当播放倍数改变时产生该事件 | |
seeked | 当用户完成跳转时产生该事件 | |
seeking | 当用户正执行跳转时操作的时候产生该事件 | |
stalled | 当试图获取媒体数据,但数据还不可用时产生该事件 | |
suspend | 当获取不到数据时产生该事件 | |
timeupdate | 当前播放位置发生改变时产生该事件 | |
volumechange | 当前音量发生改变时产生该事件 | |
waiting | 当视频因缓冲下一帧而停止时产生该事件 |
不足之处
- 一些事件将来可能会被取消
- 不是所有的状态都有事件句柄,比如停顿和清空
- 视频播放的时候页面可能不会更新,所以timeupdate事件可能会在视频播放/停止的时候被更新
- 这个实例很快就会过期