HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法。

这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果。

以下就为大家開始介绍媒体元素的相关事件。

  abort:触发时机是下载中断。

  canplay:在能够播放的时候,readyState的值为2的时候触发。

  canplaythrough:readyState的值为3的时候,触发。播放能够继续,而应该不会中断的时候触发。

  canshowcurrentframe:readyState的值为1的时候,触发。当前帧已经下载完毕的时候触发。

  dataunavailable:由于没有数据而不能播放的时候,readyState的值为0。

  durationchange:duration属性值改变触发的事件。

  emptied:网络连接关闭。

  empty:错误发生阻止了媒体下载。

  ended:媒体播放到末尾,播放停止(仅仅读)

  error:下载期间发生网络错误。

  load:触发时间全部媒体已经载入完毕。

这个事件可能会被废弃。建议使用canplaythrough。

  loadeddata:触发时间媒体的第一帧已经载入完毕。

  loadedmetadata:触发时机媒体的元素数据已经载入完毕。

  loadstart:下载已经開始。

  pause:方法是媒体開始暂停。

  play:方法是媒体開始播放。

  playing:媒体已经实际開始播放。

  progress:正在下载。

  ratechange:播放媒体的速度改变。

  seeked:搜索结束。

  seeking:正移动到新位置。

  stalled:浏览器尝试下载,但未接收到数据。

  volumechange:触发时间是volume属性或muted属性值已经改变。

  waiting:触发时间是播放暂停,等待下载很多其它数据。

  HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)已经为大家介绍完了。这么多事件有非常多,是为了让开发人员可以顺利的创建出非常人性化的媒体播放,可以毫无压力的取代flash媒体。很多其它有关HTML5的相关知识和内容敬请关注梦龙小站的相关更新。

HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)的更多相关文章

  1. HTML5实战与剖析之媒体元素(6、视频实例)

    HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多.由于手机端基本上废除了flash的独断.让HTML5当家做主人,所以对视频支持的比較好. 所以今天专门为大家奉上HTML5视频标 ...

  2. HTML5实战与剖析之媒体元素

    随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了.很恰巧的是,移动端对HTML ...

  3. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  4. HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

    可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...

  5. (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  6. HTML5实战与剖析之原生拖拽(一拖拽历史概述)

    提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...

  7. HTML5实战与剖析之跨文档消息传递(iframe传递信息)

    在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...

  8. HTML5实战与剖析之字符集属性(charset和defaultCharset)

    HTML5对字符集属性也进行了更新,其中charset和defaultCharset属性就是HTML5中新添加的字符集属性.有关charset和defaultCharset属性的具体讲解尽在HTML5 ...

  9. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

随机推荐

  1. 关于libnmap 的一些应用

    随笔描述 nmap 可以进行端口的扫描,在安全或运维中可以说是一款不错的神奇吧,在大部分LINUX 里面都自带了nmap 这款工具,他不仅仅是端口扫描,自身还提供许多插件可以使用. 官方文档 nmap ...

  2. [剑指offer] 5. 用两个栈实现队列+[剑指offer]30. 包含min函数的栈(等同于leetcode155) +[剑指offer]31.栈的压入、弹出序列 (队列 栈)

    c++里面stack,queue的pop都是没有返回值的, vector的pop_back()也没有返回值. 思路: 队列是先进先出 , 在stack2里逆序放置stack1的元素,然后stack2. ...

  3. ES学习——分析器和自定义分析器

    简介 es在对文档进行倒排索引的需要用分析器(Analyzer)对文档进行分析.建立索引.从文档中提取词元(Token)的算法称为分词器(Tokenizer),在分词前预处理的算法称为字符过滤器(Ch ...

  4. poj_3071概率dp

    确定好对手就简单了. #include<iostream> #include<cstdio> #include<cstring> #include<algor ...

  5. ThinkPHP5.0框架开发--第5章 TP5.0 控制器

    ThinkPHP5.0框架开发--第5章 TP5.0 控制器 第5章 TP5.0 控制器 ============================================== 上次复习 1.路 ...

  6. ES索引模板——就是在新建索引时候指定的正则匹配来设置mapping而已,对于自动扩容有用

    索引模板 扩容设计 » 索引模板 Elasticsearch 不要求你在使用一个索引前创建它. 对于日志记录类应用,依赖于自动创建索引比手动创建要更加方便. Logstash 使用事件中的时间戳来生成 ...

  7. 整数转罗马数字 C++实现 java实现 leetcode系列(十二)

    罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并 ...

  8. 线上服务CPU100%问题快速定位实战--转

    来自微信公众号 架构师之路 功能问题,通过日志,单步调试相对比较好定位. 性能问题,例如线上服务器CPU100%,如何找到相关服务,如何定位问题代码,更考验技术人的功底. 58到家架构部,运维部,58 ...

  9. sql server 查询某数据库中包含某字段的所有表格

    场景:查询DNMes数据库中所有包含RFID字段的表名 sql语句: select object_name(id) objName,Name as colName from syscolumns wh ...

  10. (转载)BeanUtils.copyProperties() 用法

    BeanUtils.copyProperties() 用法 标签: hibernateuserjdbc数据库strutsjava 2009-10-17 23:04 35498人阅读 评论(6) 收藏  ...