跳到主要内容

06-video事件

提示

video的事件,都需要用监听的方式进行处理 步骤均为是document.querySelector("video").addEventLisener(事件名称,回调函数,是否冒泡)

loadstart开始​

媒体开始加载了

durationchange​

总时长的变换监听 注意: 视频的总时长一定是加载之后才能拿到总时长,获取总时长, document,querySelector("video").duration 有些拿不到总时长,比如虚拟地址blob:http,同时还跟视频的格式有关系

loadedmetadata元数据​

视频的元数据加载完毕了,目前的内容里面有全部的需要的数据信息,这个事件一定是在获取完毕总时长之后发生,这是规定

loadeddata第一帧​

视频的第一帧已经加载完毕了, 但是没有足够的数据来播放下一帧,会触发loadeddata

progress下载与buffered​

监听是否正在下载数据 progress,有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。

canplay播放​

监听是否可以播放了, 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发 ,仅仅是能到达播放水平,但是具体卡不卡不知道

canplaythrough流畅播放​

监听是否有流畅的数据能够播放, 在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。在最后一定还会有N次的progress,这是因为浏览器的预加载功能造成的

play播放​

监听播放事件

pause停止​

监听停止事件

seeking点击​

监听点击(处于这个点击动作)进度条的某个时间点的事件

seeked​

监听点击(主语这个点击动作之后)进度条的某个时间点的事件 seeked, 注意: 在此 监听到seeked之后,会触发后面的canpaly,canplaythrough 注意: 点击了某个时间点之后, 触发的事件的顺序依次是seeking, seeked, canplay, canplaythroungh

waiting等待​

监听视频等待时间, 只有等下一帧需要进行缓冲了,就会触发等待的事件, , 注意:点击了时间点进度条之后,一定是先触发waiting事件之后,才会依次触发seeking, seeked, canplay, canplaythroungh

playing播放中​

监听播放中的事件 注意: 当视频进行解码之后,首先是canplay,然后才是playing

timeupdate进度条​

监听进度条事件

currentTime​

元素的currentTime属性表示的时间已经改变的时候,就会触发这个事件

volumechange音量​

监听音量的事件volumechange, 这个可以是属性volume的改变也可以是muted静音的改变

ended结束​

监听播放结束的时候触发的事件

error错误​

当播放错误的事件监听这个事件error