博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5 VIDEO标签播放事件流水
阅读量:5953 次
发布时间:2019-06-19

本文共 909 字,大约阅读时间需要 3 分钟。

HTML5 的 <video>标签有许多默认的事件,如果我们通过这个播放器加载一段视频文件,从开始加载到播放结束,都经历了哪些事件呢?这些事件的触发顺序如何?

[1]HTML5:onplay

[2]HTML5:onwaiting
[3]HTML5:ondurationchange
[4]HTML5:onloadedmetadata
[5]HTML5:onloadeddata
[6]HTML5:oncanplay
[7]HTML5:onplaying
[8]HTML5:oncanplaythrough
[9]HTML5:onended

事件详细说明:

 

onplay:

播放器不在保持“暂停”状态,即“play()”方法被调用或者autoplay属性设置为true期望播放器自动开始播放。

onwaiting:

播放由于下一帧数据未获取到导致播放停止,但是播放器没有主动预期其停止,仍然在努力的获取数据,简单的说就是在等待下一帧视频数据,暂时还无法播放。

ondurationchange

duration(视频播放总时长)属性被更新。

onloadedmetadata

获取视频meta信息完毕,这个时候播放器已经获取到了视频时长和视频资源的文件大小。

onloadeddata

视频播放器第一次完成了当前播放位置的视频渲染。

oncanplay

视频播放器已经可以开始播放视频了,但是只是预期可以正常播放,不保证之后的播放不会出现缓冲等待。

onplaying

真正处于播放的状态,这个时候我们才是真正的在观看视频。

oncanplaythrough

播放器认为从现在开始播放,直到播放结束,不再会因为等待后面的数据而出现缓冲等待。(注意,这个只是播放器根据网速和播放进度的预期估计,不代表后面的数据全部都预先缓冲完毕了,如果你手动推动控制栏的进度条,可能仍然会出现缓冲的,或者你后面网络断开了,一样没办法继续播放,除非是真的缓冲完了)

onended

播放完毕。

 

更多事件说明请参阅:

 

转:http://popotang.com/blog/html5-video-events-list.html

转载地址:http://udaxx.baihongyu.com/

你可能感兴趣的文章
数据库对接方案
查看>>
ExcelVB脚本小记(1)
查看>>
Flutter 网络请求库http
查看>>
安全狗服云手机端上架各大手机应有市场
查看>>
Android单元测试(七):Robolectric,在JVM上调用安卓的类
查看>>
移动端自适应缩放代码
查看>>
毕业设计(五)---spring学习笔记(3)之-dataSource,sessionFactory,hibernateTemplate,事务 的简单配置。...
查看>>
linux下如何添加一个用户并且让用户获得root权限
查看>>
CSS z-index 属性的使用方法和层级树的概念
查看>>
Reactjs 15.4.X IE11 Objects are not valid as a React child
查看>>
Linux substring & if
查看>>
Yii 关于AR分表
查看>>
Java中的一些基本转换
查看>>
如何把文档扫描保存到Google Drive中
查看>>
Android初始化语言 (init.*.rc、init.conf文件格式)
查看>>
取消IDEA保存文件,默认删除行尾空格
查看>>
JSTL获取session中的值
查看>>
iOS WKWebView和JS交互的两种方式
查看>>
十个Android Material Design库
查看>>
[Elasticsearch] 多字段搜索 (一) - 多个及单个查询字符串
查看>>