video元素和audio元素相关事件

前言

在利用video元素或audio元素读取或播放媒体数据时,会触发一系列事件,如果用js脚本来捕抓这些事件,就可以对着这些事件进行处理了。

捕抓的方式有两种:

第一种是监听的方式。使用vedio或audio元素的addEventListener方法来对事件进行监听,该方法可以定义如下:

vedioElement.addEventListener("error",function(){},false);

第二种是 采用获取事件句柄方式,如下:

<vedio id="vedio1" src="sample.mov" onplay="toPlay()"></vedio>
function toPlay(){
...
};

事件介绍

事件类型描述
loadstart浏览器开始在网上寻找媒体数据
progress浏览器正在获取媒体数据
suspend浏览器暂停获取媒体数据,但是下载过程并没有正常结束
abort浏览器下载完全部媒体数据之前中止获取媒体数据,但并不是下载错误引起的
error获取媒体数据的过程中出错
stalled浏览器尝试获取数据失败
play即将开始播放,当执行了play方法时触发,或数据下载后元素被设置为autoplay属性
pause播放暂停,当执行了pause方法时触发
loadedmetadata浏览器获取完媒体的时长和字节数
loadeddata浏览器已加载完当前播放位置的媒体数据,准备播放
waiting播放过程由于得不到下一帧而暂停播放(如下一帧尚未加载完),但很快就能够得到下一帧
playing正在播放
canplay浏览器能够播放媒体,但估计以当前播放速率不能直接将媒体播放完,播放期间需要缓冲
canplaythrough浏览器可以播放媒体,而且以当前播放速率能够将媒体播放完,不再需要进行缓冲
seekingseeking属性变为true,表明浏览器正在请求数据
seekedseeking属性变为false,表示浏览器停止请求数据
timeupdate当前播放位置发生改变,可能是播放过程中的自然改变,也可能是人为的改变,或由于播放不能连续而发生的跳变
ended播放结束后停止播放
ratechangedefaulplaybackRate属性(默认播放速率)或playbackRate属性(当前播放速率)发生改变
durationchange播放时长发生改变
volumechangevolume属性(音量)发生改变或muted属性(静音状态)发生改变

demo

参考链接
http://www.runoob.com/jsref/d…

    原文作者:mydef
    原文地址: https://segmentfault.com/a/1190000008885871
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞